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

<!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. YOLO+yolo9000配置使用darknet

    Installing Darknet 1.直接设置使用,编译通过 git clone https://github.com/pjreddie/darknet.git cd darknet make 2 ...

  2. 2016年蓝桥杯C/C++B组

    第一次參加蓝桥杯.也是有非常多感触的,时间全然不够写最后一题... 最后一题没做...还有全排序非常重要... 1. 煤球数目 有一堆煤球,堆成三角棱锥形.详细: 第一层放1个, 第二层3个(排列成三 ...

  3. Locust压力测试Odoo

    Table of Contents 编写测试任务集 TaskSet 运行 Locust 分布式 运行 master 运行 slave.     Locust 是个伸缩性很好的压力测试框架,OdooLo ...

  4. 通过a标签（不丢失referrer）打开另一个窗口

    第一页 //这个是显示窗口的方法 function frmshow(arr){ var old; var val =$.trim($("#phone").val()); if (v ...

  5. CocoaAsyncSocket 文档1：Socket简单介绍

    前言 CocoaAsyncSocket是 IOS下广泛应用的Socket三方库,网上相关样例数不胜数.这里我就不直接上代码,本文由B9班的真高兴发表于CSDN博客.另辟一条思路:翻译SocketAsy ...

  6. 安装CoreOS到磁盘

    1 打开翻&&墙软件 2 打开迅雷,启用“使用IE代理”,下载以下两个文件:(翻&&墙后用IE下会中断) http://stable.release.core-os.n ...

  7. Struts2学习八----------接收参数

    © 版权声明:本文为博主原创文章,转载请注明出处 接收参数 - 使用Action的属性接收参数 - 使用Domain Model接收参数 - 使用ModelDriven接收参数 实例 1.项目结构 2 ...

  8. 有关SQL注入的知识

    SQL注入攻击是非常令人讨厌的安全漏洞,是所有的web开发人员,不管是什么平台,技术,还是数据层,需要确信他们理解和防止的东西.不幸的是,开发人员往往不集中花点时间在这上面,以至他们的应用,更糟糕的是 ...

  9. 开启Java远程调试

    在JDK启动时,加入 -Xrunjdwp:transport=dt_socket,address=9900,server=y,suspend=n -Dcom.sun.management.jmxrem ...

  10. 编译webrtc for android库与apk

    git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git export PATH=`pwd`/depot_t ...