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

<!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. 转: https 加密通信流程

    https 加密通信流程当用户在浏览器中输入一个以https开头的网址时,便开启了浏览器与被访问站点之间的加密通信.下面我们以一个用户访问https://qbox.me为例,给读者展现一下SSL/TL ...

  2. jmeter 压测工具

    Apache jmeter 压力测试 java 环境安装 https://www.cnblogs.com/smyhvae/p/3788534.html 下载地址和文档 http://itopic.or ...

  3. koajs 项目实战（二）

    此篇文章,接 koajs 项目实战(一)后写 (六)表单提交和参数接收 表单: <form method="post" action="./users/zhuce& ...

  4. odoo图片显示

        如果在odoo客户端展示图片, 可以用 url( data:image/png;base64, 图片base64编码过的内容) 展示, 例如     url(data:image/png;ba ...

  5. Nook 2 Root

        最后我还是忍不住root了它,用了差一点够一个月 1.备份2.root 3.装软件=====================================================1. ...

  6. 缷载vs2015后项目不能加载问题

    当加载项目时出现MSBuildToolsPath is not specified for the ToolsVersion "14.0" defined at "HKE ...

  7. robotframework使用之RIDE的底部的日志没显示怎么办？

    问题:RIDE的底部的日志没显示怎么办? 解决办法:在Python27的安装路径下D:\Python27\Lib\site-packages\robotide\contrib\testrunner下的 ...

  8. HTML元素定位

    一切皆为框 div.h1 或 p 元素常常被称为块级元素(block element).这意味着这些元素显示为一块内容,即"块框".与之相反,span 和 strong 等元素称为 ...

  9. Android 属性动画框架 ObjectAnimator、ValueAnimator ，这一篇就够了

    前言 我们都知道 Android 自带了 Roate Scale Translate Alpha 多种框架动画,我们可以通过她们实现丰富的动画效果,但是这些宽家动画却有一个致命的弱点,它们只是改变了 ...

  10. HDFS源码分析数据块复制监控线程ReplicationMonitor（一）

    ReplicationMonitor是HDFS中关于数据块复制的监控线程,它的主要作用就是计算DataNode工作,并将复制请求超时的块重新加入到待调度队列.其定义及作为线程核心的run()方法如下: ...