VUE指令-样式绑定v-bind

来源：互联网发布：js 数组 contains方法编辑：程序博客网时间：2024/06/06 03:00

样式绑定v-bind

操作元素的 class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

v-bind:style

v1.v-bind:style="{ key:value }"</div>

<hr />

<div>

Name

</div>

Name

</div>

v-bind:class

v0.v-bind指令示例(class)</div>

<hr />

<div>

Name

</div>

Name

</div>

Name

</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.htmlhttps://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

阅读全文

'); })();