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

<!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. Web前端开发规范收集

    在Web开发中,后端跟前端配合非常easy出现故障.这时我们就须要一些规则来约束前端任意的编写. CSS编程规范 1.      属性书写基本顺序 a.      先位置属性(position, to ...

  2. pyhton3 一些排序算法概括

    1.冒泡算法 import random import datetime def maopao(data): # 检测是否排序完成 for i in range(len(data)-1): flag ...

  3. 《学习bash》笔记--调试shell程序

    在shell中,最简单的调试助手时输出语句echo,能够通过把很多echo语句放到代码中进行调试,但必须花费足够的时间以定位 要查看的信息.可能必须通过很多的输出才干发现要查找的信息. 1.set选项 ...

  4. MySqlDataReader

    本文讲述如何从SqlDataReader或MySqlDataReader中循环读取内容并输出 sqlserver和mysql的DataReader的用法完全一样,只是名字不同,以mysql为例 str ...

  5. cmake学习之- cmake_parse_arguments

    最后更新: 2019-06-08 一.指令介绍 cmake_parse_arguments 为解析函数(function)或 宏(macros) 参数的命令: cmake_parse_argument ...

  6. 常见的CPU訪问引起的内存保护问题为什么仅仅用event_122上报 - 举例2

    还有一个样例.通过以下的log看,CPU在訪问reserved的地址0x53611EFD.非法訪问时该地址会在L1D内存控制器的L1DMPFSR寄存器中记录. ** FATAL EXCEPTION N ...

  7. wifi认证Portal开发系列（三）：portal协议

    中国移动WLAN业务PORTAL协议规范介绍 一.用户上线认证流程 上线流程完成用户账号的认证,并把认证结果通知Portal Server,Portal server将会通知WLAN用户并且显示相应的 ...

  8. 【GoldenGate】使用OGG，两个Oracle库之间单向同步数据

    ************************************************************************ ****原文:blog.csdn.net/clark_ ...

  9. memcached 搭建

     linux 下memcached 的搭建 memcached 下载地址:http://www.danga.com/memcached/dist/ libevent 下载地址:http://libev ...

  10. HDU 1853 Cyclic Tour[有向环最小权值覆盖]

    Cyclic Tour Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/65535 K (Java/Others)Total ...