class绑定
- :class=‘xxx’
- 表达式是字符串: ‘classA’
- 表达式是对象: {classA:isA, classB: isB}
- 表达式是数组: [‘classA’, ‘classB’]
style绑定
- :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
- 其中 activeColor/fontSize 是 data 属性
条件渲染指令
比较v-if 和 v-show
- 如果需要频繁切换 v-show 较好
- 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.aClass{
color:red;
}
.bClass{
color: green;
}
.cClass{
font-size: 50px;
}
.dClass{
color: aquamarine;
}
</style>
<script src="vue.min.js"></script>
<body>
<!-- class绑定 :class -->
<div id="demo">
<p class="cClass" :class="a">class绑定->字符串</p>
<p :class="{aClass:boola, bClass:boolb}">class绑定->对象</p>
<p :class="[classX,classV]">class绑定->数组</p>
<p :style="{color:activeColor,fontSize:fontSize + 'px'}">style绑定</p>
<button @click="update">更新</button>
<hr />
<p v-if="ok">成功</p>
<p v-else>失败</p>
<p v-show="ok">升职成功</p>
<p v-show="!ok">升职失败</p>
<button @click="ok=!ok">变</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#demo',
data: {
a:'aClass',
boola: true,
boolb: false,
classX:'aClass',
classV:'cClass',
activeColor:'red',
fontSize:'20',
ok:true,
},
methods:{
update(){
this.a = 'bClass';
this.boola = false;
this.boolb = true;
this.classX = 'bClass';
this.classV = 'dClass';
this.activeColor = 'yellow';
this.fontSize='60';
}
},
})
</script>
</html>