VueJs Style 绑定内联样式 对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名
应用介绍
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: { activeColor: 'red', fontSize: 30 }
直接绑定到一个样式对象通常更好,这会让模板更清晰:
<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' } }
同样的,对象语法常常结合返回对象的计算属性使用。
案例演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VueJsAndStyle</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">VueJsAndStyle</div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data: { activeColor: 'red', fontSize: 30 } }) </script> <div id="app_one"> <div v-bind:style="styleObject">VueJsAndStyle</div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app_one", data: { styleObject: { color: 'red', fontSize: '13px' } } }) </script> <div id="app_two"> <div v-bind:style="styleObject">{{ msg }}</div> </div> //VueJs结合返回对象的计算属性使用 <script type="text/javascript"> new Vue({ el: "#app_two", data: { msg: "结合返回对象的计算属性使用", color: 'red', fontSize: '12px' }, computed: { styleObject: function () { return {color: 'red', fontSize: '23px'} } } }) </script> </body> </html>
©软件著作权归作者所有。本站所有软件均来源于网络,仅供学习使用,请支持正版!
转载请注明出处: 我的网站 » VueJs Style 绑定内联样式 对象语法
发表评论 取消回复