“Vue从入门到实战:绑定内联样式”的版本间的差异
来自CloudWiki
(创建页面,内容为“==对象语法== 使用v-bind:style可以给元素绑定内联样式。”) |
|||
第1行: | 第1行: | ||
==对象语法== | ==对象语法== | ||
使用v-bind:style可以给元素绑定内联样式。 | 使用v-bind:style可以给元素绑定内联样式。 | ||
+ | |||
+ | v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名: | ||
+ | |||
+ | <nowiki><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> | ||
+ | |||
+ | data: { | ||
+ | activeColor: 'red', | ||
+ | fontSize: 30 | ||
+ | } | ||
+ | </nowiki> | ||
+ | |||
+ | 直接绑定到一个样式对象通常更好,这会让模板更清晰: | ||
+ | |||
+ | <nowiki><div v-bind:style="styleObject"></div> | ||
+ | |||
+ | data: { | ||
+ | styleObject: { | ||
+ | color: 'red', | ||
+ | fontSize: '13px' | ||
+ | } | ||
+ | }</nowiki> | ||
+ | |||
+ | 同样的,对象语法常常结合返回对象的计算属性使用。 | ||
+ | |||
+ | ==数组语法== | ||
+ | v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上: | ||
+ | |||
+ | <nowiki><!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <title>style绑定</title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id = "app"> | ||
+ | <div v-bind:style="[baseStyles, moreStyles]"></div> | ||
+ | </div> | ||
+ | |||
+ | <script src="vue.js"></script> | ||
+ | <script> | ||
+ | var vm = new Vue({ | ||
+ | el: '#app', | ||
+ | data: { | ||
+ | baseStyles: { | ||
+ | border: 'solid 2px black' | ||
+ | }, | ||
+ | moreStyles: { | ||
+ | width: '100px', | ||
+ | height: '100px', | ||
+ | background: 'orange' | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
+ | </html></nowiki> |
2021年2月9日 (二) 04:56的版本
对象语法
使用v-bind:style可以给元素绑定内联样式。
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (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' } }
同样的,对象语法常常结合返回对象的计算属性使用。
数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>style绑定</title> </head> <body> <div id = "app"> <div v-bind:style="[baseStyles, moreStyles]"></div> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { baseStyles: { border: 'solid 2px black' }, moreStyles: { width: '100px', height: '100px', background: 'orange' } } }); </script> </body> </html>