样式绑定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