样式绑定v-bind
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
v-bind:style
|
<!-- 格式v-bind:style="{ key:value }" --> <!-- 格式v-bind:style="[dataStyle0,dataStyle1]" --> <!-- 样式属性不添加‘‘，将缩写为java驼峰命名变量 ‘font-size‘ >>> fontSize --> <div style="height: 180px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-bind:style="{ key:value }"</div> <hr /> <div> <div v-bind:style="{ color:colorVar , fontSize:fontVar + ‘px‘}"> Name </div> <div v-bind:style="[dataStyle0,dataStyle1]"> Name </div> </div> </div> |
v-bind:class
|
<!-- 格式v-bind:class="{ clazzStyle , isBind }" --> <!-- 格式v-bind:class="clazzObject" ,obj包含需要绑定的样式 --> <!-- 格式v-bind:class="[clazz0,clazz1]" ,clazz定义在data的样式对象 --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-bind指令示例(class)</div> <hr /> <div> <div v-bind:class="{ style0 : isBind ,style1:true}"> Name </div> <div v-bind:class="clazzObj"> Name </div> <div v-bind:class="cssClazz"> Name </div> </div> </div> |
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script> <title>HelloDemo</title> </head> <body style="height: 100%;"> <style> .style0{ font-size: 25px; color: green; } .style1{ background: gold; } </style> <!-- VUE指令v-bind样式绑定指令 REF: http://www.runoob.com/vue2/vue-class-style.html https://cn.vuejs.org/v2/guide/class-and-style.html --> <div id="appVue"> <!-- 格式v-bind:class="{ clazzStyle , boolean表达式 }" --> <div style="height: 200px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-bind条件渲染(value,key,index)</div> <hr /> <div> <div v-bind:class="{style0: 5 > 1}"> Name </div> </div> </div> <!-- 格式v-bind:style="{ key:value }" --> <!-- 格式v-bind:style="[dataStyle0,dataStyle1]" --> <!-- 样式属性不添加‘‘，将缩写为java驼峰命名变量 ‘font-size‘ >>> fontSize --> <div style="height: 180px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-bind:style="{ key:value }"</div> <hr /> <div> <div v-bind:style="{ color:colorVar , fontSize:fontVar + ‘px‘}"> Name </div> <div v-bind:style="[dataStyle0,dataStyle1]"> Name </div> </div> </div> <!-- 格式v-bind:class="{ clazzStyle , isBind }" --> <!-- 格式v-bind:class="clazzObject" ,obj包含需要绑定的样式 --> <!-- 格式v-bind:class="[clazz0,clazz1]" ,clazz定义在data的样式对象 --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-bind指令示例(class)</div> <hr /> <div> <div v-bind:class="{ style0 : isBind ,style1:true}"> Name </div> <div v-bind:class="clazzObj"> Name </div> <div v-bind:class="cssClazz"> Name </div> </div> </div> </div> <script> new Vue({ el: "#appVue", data: { cssClazz:‘style1‘, clazzObj:{ ‘style0‘:true }, colorVar:‘green‘, fontVar:25, isBind:true, dataStyle0:{ ‘color‘:‘red‘, ‘font-size‘:‘30px‘ }, dataStyle1:{ fontWeight:‘bold‘ } } } ) </script> </body> </html>
REF:
http://www.runoob.com/vue2/vue-class-style.html
https://cn.vuejs.org/v2/guide/class-and-style.html
