:style动态设置属性
前段时间做页面时需要动态设置背景图片，每一种框架都会遇见类似的需求，特记录下来，以免不时之需：
<!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动态设置属性的更多相关文章
- WdatePicker日历控件动态设置属性参数值
首先吐槽一下需求人员给了我一个很坑的需求:WdatePicker日历控件里面选择的最小时间(minDate)的值是级联动态改变的,而且这个值要从数据库获取,这样子只能使用 ajax 来发起请求获取mi ...
- 使用dynamic动态设置属性值与反射设置属性值性能对比
static void Main(string[] args) { int times = 1000000; string value = "Dynamic VS Reflection&qu ...
- vue 用 :style动态修改带中划线的样式属性
今天在项目中遇到要用:style动态设置margin-top值,直接写发现报错.后来改成驼峰就成功了,记录一下 错误示范: <div class="testLeft ulData&qu ...
- 【微信小程序】动态设置图片大小
我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src 图片资源地址2.mode 图片裁剪.缩放的模式3.binderror ...
- JMeter非GUI方式运行时动态设置线程组及传参
http://blog.csdn.net/selingchen/article/details/48106517 在使用JMeter进行性能测试自动化时,可能会有如下需求: 1.指定运行多少线程,指定 ...
- JMeter命令行方式运行时动态设置线程数及其他属性（动态传参）
在使用JMeter进行性能测试时,以下情况经常出现: 1.测试过程中,指定运行的线程数.指定运行循环次数不断改变: 2.访问的目标地址发生改变,端口发生改变,需要改写脚本. 上面的问题在GUI中,直接 ...
- JMeter命令模式下动态设置线程组和持续时间等动态传参
背景: 1.当通过JMeter的图像化界面运行性能压测或者场景时候,JMeter界面很容易导致界面卡死或者无响应的情况(20个线程数就会卡死) 现象如下:
- android 怎么动态设置button 的style
网上找了很多,还是没有直接的解决办法,button没有setstyle这个方法.因此我的解决办法如下: 直接动态设置各个属性 Button themeBtn = new Button(this); t ...
- 动态设置背景图片，class，style
1.动态设置背景图片<div v-if='img ' :style="{background: 'url('+ img +')',backgroundSize:cover }" ...
随机推荐
- Windows网络编程 2 【转】
Windows网络编程使用winsock.Winsock是一个基于Socket模型的API,在Windows系统中广泛使用.使用Winsock进行网络编程需要包含头文件Winsock2.h,需要使用库 ...
- nginx 按天生成日志
nginx日志access.log error.log按天生成存储,定时删除日志 logrotate https://linux.cn/article-4126-1.html http://blog. ...
- 2017.2.28 activiti实战--第五章--用户与组及部署管理（三）部署流程及资源读取
学习资料:<Activiti实战> 第五章 用户与组及部署管理(三)部署流程及资源读取 内容概览:如何利用API读取已经部署的资源,比如读取流程定义的XML文件,或流程对应的图片文件. 以 ...
- 2017.04.20 Adams仿真介绍
Adams 仿真 | 验证"隐性机器人模型"概念,提高视觉伺服精度 产品:Adams行业:科研优势: 1.Adams 仿真可精确预测机器人的位置和方位 2.仿真在理论工作验证中起着 ...
- 微信小程序 - 单个题目
后端传过来的数据,如果通过wx:for遍历出来那就是一个页面全部排下来.... 我的想法就是,页面初始化时设置一个默认值 1/50 就是 index+1 / 50(后端传过来的数组长度),通过控制in ...
- day06_方法_20150806
day06_方法_20150806 -------------------------回想:--------------------------------- 1.更佳适用情况 当---w ...
- 实战c++中的vector系列--vector的遍历(stl算法、vector迭代器(不要在循环中推断不等于end())、operator[])
遍历一个vector容器有非常多种方法.使用起来也是仁者见仁. 通过索引遍历: for (i = 0; i<v.size(); i++) { cout << v[i] << ...
- HDU 4355 Party All the Time（三分|二分）
题意:n个人,都要去參加活动,每一个人都有所在位置xi和Wi,每一个人没走S km,就会产生S^3*Wi的"不舒适度",求在何位置举办活动才干使全部人的"不舒适度&quo ...
- C#遍历指定路径下的目录
通过指定路径訪问路径下的文件.在C#的开发中主要利用了Directory类和DirectoryInfo类,简要介绍Directory类中的成员:命名空间 System.IO 命名空间 1.Create ...
- sql join相关
JOIN: 如果表中有至少一个匹配,则返回行 LEFT JOIN: 即使右表中没有匹配,也从左表返回所有的行,返回左表所有行 RIGHT JOIN: 即使左表中没有匹配,也从右表返回所有的行,返回右表 ...