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

<!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. 九度oj题目&amp;吉大考研10年机试题全解

    吉大考研机试2010年题目 题目一(jobdu1478:三角形的边).    http://ac.jobdu.com/problem.php?pid=1478 给出三个正整数,计算最小的数加上次小的数 ...

  2. 转： php实现的开源电商网站

    转:http://www.magentochina.org/what-is-magento

  3. Jquery.ajax报parseerror Invalid JSON错误的原因和解决方法:不能解析

    (默认: 自动判断 (xml 或 html)) 请求失败时调用时间.参数有以下三个:XMLHttpRequest 对象.错误信息.(可选)捕获的错误对象.如果发生了错误,错误信息(第二个参数)除了得到 ...

  4. 事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->  事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传 ...

  5. Linux 网络概述

    OSI參考模型与TCP/IP參考模型 如上图所看到的. OSI的应用层.表示层.会话层相应TCP/IP的应用层:OSI的传输层相应TCP/IP的传输层.OSI的网络层相应TCP/IP的网络层:OIS的 ...

  6. Snubber电路

    http://www.elecfans.com/yuanqijian/dianrongqi/20170601520736.html https://wenku.baidu.com/view/166f1 ...

  7. Redis(九):使用RedisTemplate访问Redis数据结构API大全

    RedisTemplate介绍 spring封装了RedisTemplate对象来进行对redis的各种操作,它支持所有的 redis 原生的api. RedisTemplate在spring代码中的 ...

  8. hdu 1598 find the most comfortable road（并查集+枚举）

    find the most comfortable road Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  9. Bootstrap--常用及实例合集

    栅格系统 1. row必须放到container和container-fluid里面        2. 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row ...

  10. lucene分词器中的Analyzer,TokenStream, Tokenizer, TokenFilter

    分词器的核心类: Analyzer:分词器 TokenStream: 分词器做优点理之后得到的一个流.这个流中存储了分词的各种信息,能够通过TokenStream有效的获取到分词单元. 下面是把文件流 ...