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

<!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. MFC中 自定义消息

    想在对话框显示出来后立即执行一段代码. 方法之一是自定义消息,即添加一个自定义的消息在消息队列中等待对话框初始化之后从消息队列中读取消息执行代码. 在OnInitDialog返回之前post一个自定义 ...

  2. 【重点突破】——SVG技术动态随机绘制圆形

    一.引言 在学习Canvas绘图技术时,做的是随机验证码的例子,在学习SVG绘图技术时,同样也有一个随机绘制的例子——动态随机绘制圆形.这个练习,即综合了多种SVG技术的知识点,又很具有艺术感,随机生 ...

  3. 以前整理的网络上免费API接口

    以前整理的一些免费的API接口,具体是否好用还需要时间测试,但是先分享给大家. 天气接口 聚合数据: http://op.juhe.cn/onebox/weather/query 用例 官方文档 来源 ...

  4. UNP学习笔记（第十七章 ioctl操作）

    ioctl相当于一个杂物箱,它一直作为那些不适合归入其他精细定义类别的特性的系统接口. 本章笔记先放着,到时候有需要再看 ioctl函数 #include <unistd.h> int i ...

  5. JAVA启动参数整理

    http://blog.csdn.net/turkeyzhou/article/details/7619472 java启动参数共分为三类: 其一是标准参数(-),所有的JVM实现都必须实现这些参数的 ...

  6. VueJS循环语句：v-for

    v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. HTML <!DOCTYPE html> <ht ...

  7. php的strip_tags,htmlspecialchars,htmlentities,stripslashes,addslashes解释

    php函数蛮多的,要完整的每个函数都理解深刻是个挺有挑战性的事情. strip_tags,htmlspecialchars,htmlentities,stripslashes,addslashes这几 ...

  8. 试验笔记 - 使用7-ZIP压缩来减小APK安装包体积

    7-ZIP版本:9.20 x86 And x64 Windows(2010-11-18) 1. 将APK包解压到文件夹2. 全选所有文件,右键“添加到压缩包”3.“压缩格式”必须“zip”4.“压缩等 ...

  9. jquery垂直滚动插件一个参数用于设置速度,兼容ie6

    利用外层的块级元素负外边距来滚动 1.使用 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww ...

  10. 深入浅出Attribute（三）

    约定: 1.”attribute”和”attributes”均不翻译 2.”property”译为“属性” 3.msdn中的原句不翻译 4.”program entity”译为”语言元素” Attri ...