前段时间做页面时需要动态设置背景图片，每一种框架都会遇见类似的需求，特记录下来，以免不时之需：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            li span {

                width: 100px;

                height: 100px;

                border-radius: 999px;

                border: 1px solid red;

                background-position: center center;

                -webkit-background-size: cover;

                background-size: cover;

                display: inline-block;

            }

        </style>

    </head>

    <body>

        <ul id="app">

            <li v-for= "item in a">

                <span :style="{backgroundImage: 'url(' +item.b+ ')'}">111</span>

            </li>

        </ul>

    </body>

    <script src="js/vue.js"></script>

    <script>

        var a= new Vue({

            el: "#app",

            data: {

                a: [{b: './img/gintama.jpg'},

                {b: './img/glass.jpg'},

                {b: './img/leader.jpg'}]

            }

        })

    </script>

</html>

核心代码：

<li v-for= "item in a">
     <span :style="{backgroundImage: 'url(' +item.b+ ')'}">111</span>            
</li>

分析：

:style为字符串类型的对象，在对象内，属性名简写，属性值为字符串类型，即必须带上‘，

而根据vue的语法，使用vue值的时候不需要像angular一样用{{}}包裹

:style动态设置属性的更多相关文章

  1. WdatePicker日历控件动态设置属性参数值

    首先吐槽一下需求人员给了我一个很坑的需求:WdatePicker日历控件里面选择的最小时间(minDate)的值是级联动态改变的,而且这个值要从数据库获取,这样子只能使用 ajax 来发起请求获取mi ...

  2. 使用dynamic动态设置属性值与反射设置属性值性能对比

    static void Main(string[] args) { int times = 1000000; string value = "Dynamic VS Reflection&qu ...

  3. vue 用 :style动态修改带中划线的样式属性

    今天在项目中遇到要用:style动态设置margin-top值,直接写发现报错.后来改成驼峰就成功了,记录一下 错误示范: <div class="testLeft ulData&qu ...

  4. 【微信小程序】动态设置图片大小

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror   ...

  5. JMeter非GUI方式运行时动态设置线程组及传参

    http://blog.csdn.net/selingchen/article/details/48106517 在使用JMeter进行性能测试自动化时,可能会有如下需求: 1.指定运行多少线程,指定 ...

  6. JMeter命令行方式运行时动态设置线程数及其他属性（动态传参）

    在使用JMeter进行性能测试时,以下情况经常出现: 1.测试过程中,指定运行的线程数.指定运行循环次数不断改变: 2.访问的目标地址发生改变,端口发生改变,需要改写脚本. 上面的问题在GUI中,直接 ...

  7. JMeter命令模式下动态设置线程组和持续时间等动态传参

    背景: 1.当通过JMeter的图像化界面运行性能压测或者场景时候,JMeter界面很容易导致界面卡死或者无响应的情况(20个线程数就会卡死) 现象如下:

  8. android 怎么动态设置button 的style

    网上找了很多,还是没有直接的解决办法,button没有setstyle这个方法.因此我的解决办法如下: 直接动态设置各个属性 Button themeBtn = new Button(this); t ...

  9. 动态设置背景图片，class，style

    1.动态设置背景图片<div v-if='img ' :style="{background: 'url('+ img +')',backgroundSize:cover }" ...

随机推荐

  1. （原创）lightgbm 一些错误情况处理

    1.做多分类问题时候(mutticlass),如果遇到 lightgbm.basic.LightGBMError: b'Number of classes should be specified an ...

  2. 1毛钱的CDN你家的站点会用吗？

    在第七届中国云计算大会上,作为CDN领域最具重量级的受邀发言人.迅雷CTO.网心科技CEO陈磊在发表重要演讲时,宣布迅雷将推出国内首家无限节点CDN.而这一款CDN号称眼下国内最廉价的CDN,售价仅为 ...

  3. JAVA Eclipse ActivityManager Warning Activity not started, its current task has been brought to the front怎么办

    Eclipse运行提示Activity not started,因为当前程序已经在运行,需要退出当前程序再测试

  4. AutoCAD2004启动时出现fail to get CommcntrController的怎么办

    解决AutoCAD2004启动时出现fail to get CommcntrController的问题! 2009-02-01 18:06 以前安装AutoCAD2004的时候可以用正常使用,后来又装 ...

  5. Vue2.0 :key作用

    转自:https://www.cnblogs.com/zhumingzhenhao/p/7688336.html 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需 ...

  6. tyvj-1460 旅行

    题目描写叙述: A国有n座城市,每座城市都十分美,这使得A国的民众们很喜欢旅行. 然而,A国的交通十分落后,这里仅仅有m条双向的道路.而且这些道路都十分崎岖,有的甚至还是山路.仅仅能靠步行.通过每条道 ...

  7. Exception from HRESULT: 0x80070057 (E_INVALIDARG)

    Exception from HRESULT: 0x80070057 (E_INVALIDARG)异常. 解决方案:清除ASP.NET缓存目录中对应的应用程序目录. ASP.NET缓存目录如下: C: ...

  8. Hadoop2.2.0-64位编译

    本作品由Man_华创作,采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.基于http://www.cnblogs.com/manhua/上的作品创作. 实验环境:Ubunt ...

  9. React学习之事件绑定

    React事件绑定有主要有三种方式 第一种官方推荐方式: class LoginControl extends React.Component {   constructor(props) {     ...

  10. python中executemany的使用

    conn = MySQLdb.connect(host = “localhost”, user = “root”, passwd = “password”, db = “myDB”, charset= ...