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

<!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. linux下怎样对串口编程

    Linux操作系统从一開始就对串行口提供了非常好的支持,本文就Linux下的串行口通讯编程进行简单的介绍. 串口简单介绍串行口是计算机一种经常使用的接口.具有连接线少.通讯简单.得到广泛的使用. 经常 ...

  2. 2017.2.20 activiti实战--第二章--搭建Activiti开发环境及简单示例（一）搭建开发环境

    学习资料:<Activiti实战> 第一章 认识Activiti 2.1 下载Activiti 官网:http://activiti.org/download.html 进入下载页后,可以 ...

  3. AutoIT V3如何修改字体

    1 如图所示,文字很小,阅读和编写多很吃力.   2 按住Ctrl,鼠标滚轮上下滚动可以改变字体大小.   3 如何修改界面的字体,比如改为微软雅黑的字体,现在还没有一个好的解决方案,大家先将就着用吧 ...

  4. mysql使用mysqldump 与 mysqlimport进行数据库迁移

    1.导入数据库 1)source source /home/platvt/product/pc2_create_tables.sql 2)mysqlimport 使用mysqlimport导入数据: ...

  5. C++的标准模板库STL中实现的数据结构之顺序表vector的分析与使用

    摘要 本文主要借助对C++的标准模板库STL中实现的数据结构的学习和使用来加深对数据结构的理解.即联系数据结构的理论分析和详细的应用实现(STL),本文是系列总结的第一篇,主要针对线性表中的顺序表(动 ...

  6. 红米note3刷安卓原生

    http://www.romzj.com/rom/63404.htm#comments-version 然后在系统设置里升级系统, http://www.lineageosdownloads.com/ ...

  7. C# 读取Excel中的数据

    #region 读取Excel中的数据 /// <summary> /// 读取Excel中的数据 /// </summary> /// <param name=&quo ...

  8. Python数据结构：列表、元组和字典

    在Python中有三种内建的数据结构——列表list.元组tuple和字典dict 列表中的项目包括在方括号中,项目之间用逗号分割 元组和列表十分类似,只不过元组和字符串一样是不可变的 即你不能修改元 ...

  9. Linux内存段的分析

        Linux 应用程序的内存分配中,是用 segment(段)进行区别的,使用 size 命令进行查看: size a.out text data bss dec hex filename a. ...

  10. 从英语单词shell想到的

    shell当初听到以为很高级 后来才知道只是壳而已 百度百科中解释为 shell 在计算机科学中,Shell俗称壳(用来区别于核),是指“提供使用者使用界面”的软件(命令解析器).它类似于DOS下的c ...