Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 
2. Vue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">51code</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
activeColor:"green",
fontSize:20
}
})
</script>
</body>
</html>
运行结果：
上述代码中，我们通过v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'设置的div的字体颜色和字体大小。
我们也可以将div的样式绑定在一个样式对象上，这样看起来会更清晰
下面通过绑定样式对象实现和上个例子一样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="styleObj">51code</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
styleObj:{
color:"green",
fontSize:"20px"
}
}
})
</script>
</body>
</html>
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="[baseStyles,overridingStyles]">51code</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
baseStyles:{
color:"green",
fontSize:"20px"
},
overridingStyles:{
"background-color":"yellow"
}
}
})
</script>
</body>
</html>
转载于:https://my.oschina.net/u/2971691/blog/862994
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）相关推荐
- Vue+Electron学习系列 (三) -- 自动更新
Vue+Electron学习系列 1️⃣Vue+Electron学习系列 (一) -- 初识 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...
- JavaScript学习（三十四）—事件委托
JavaScript学习(三十四)-事件委托 (一).什么是事件委托? 所谓的事件委托就是指将事件添加到祖先元素身上,依据事件冒泡的原理(就是指事件的执行顺序是从当前元素逐步扩展到祖先元素,直到扩展到 ...
- java云同桌学习系列（十四）——JavaScript语言
本博客java云同桌学习系列,旨在记录本人学习java的过程,并与大家分享,对于想学习java的同学,可以随着我的步伐一起进步,我希望这个系列能够鼓励大家一同与我学习java,成为"云同桌& ...
- 系统学习深度学习（三十四）--Dueling DQN
转自:https://www.cnblogs.com/pinard/p/9923859.html 1. Dueling DQN的优化点考虑 在前面讲到的DDQN中,我们通过优化目标Q值的计算来优化算法 ...
- Vue+OpenLayers学习系列（九）Vue+OpenLayers小案例（长度测量、面积测量、坐标定位、坐标获取）
很早之前做的一个例子,最近想复习下Vue+OpenLayers的使用案例,所以发出来供大家下载 vue-ol-demo-master 本Demo的功能包括:地图展示.地图放大缩小.添加鹰眼.长度测量. ...
- javaweb学习总结(三十四)——使用JDBC处理MySQL大数据
一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 在实际开发中,有时 ...
- BizTalk开发系列(三十四) Xpath
更多内容请查看:BizTalk动手实验系列目录 BizTalk 开发系列 XPath 是在 XML 文档中查找信息的语言,在BizTalk的开发中应用非常广 ...
- 电气器件系列三十四：智能除湿装置
冷凝智能除湿装置是采用半导体冷凝方式,主动将密闭空间的潮湿空气在风扇的作用下吸入除湿风道,空气中的水汽经过冷凝机构后凝结成水,再通过导水管排出柜体,可以达到很好的除湿效果.智能除湿装置把被动防止凝露方 ...
- tensorflow学习笔记(三十四)：Saver(保存与加载模型)
Saver tensorflow 中的 Saver 对象是用于 参数保存和恢复的.如何使用呢? 这里介绍了一些基本的用法. 官网中给出了这么一个例子: v1 = tf.Variable(..., na ...
- STM32学习心得三十四：外部SRAM原理及实验代码解读
记录一下,方便以后翻阅~ 主要内容: 1) IS62WV51216简介: 2) FSMC简介及相关寄存器介绍: 3) 相关实验代码解读. 参考手册: <STM32中文参考手册_V10>-第 ...
最新文章
- STM32 基础系列教程 2 - GPIO 按键输入
- halcon的算子清点： Chapter 5 滤波
- qpython numpy_Python-Numpy全面精简教程
- 什么是光纤放大器？光放大器的原理是什么？
- jetson刷机遇到cuda装不了
- Daemon Process
- nbu备份文件失败，提示信息NBU status: 2074, EMM status: Disk volume is down
- 生命计算机在线,生命计算器
- 女性内分泌失调要小心
- java学生管理系统购买_GitHub - Xiaoxin-love/StudentSystem: java学生管理系统
- 四 利用excel实现数据可视化
- PCR主成分回归预测MATLAB代码 代码注释清楚。 main为主程序，读取EXCEL数据
- QVW Load多个不同目录下的QVD文件
- 油气计量比较好的软件_您准备好使用计量互联网了吗？
- 有源淹没分析arcgis_洪涝有源淹没算法及淹没结果分析
- 一套效果图适配(Android和IOS)全尺寸和标注规范-（三）（360x640）
- 掌握Ajax 第五部分 参考资料
- 微信小程序 滚动列表（无限滚动）
- Android设计规范-字体字号
- windows 下 c++ 快速截屏