1、:class 指令
在 Vue.js 中，:class 指令（或 v-bind:class）允许你动态地绑定 CSS 类到一个元素。这个指令有两种主要的使用方式：绑定一个对象或者绑定一个数组。
1.1、:class{} 对象语法
对象语法允许你基于条件来添加或移除类。对象的键是类名，值是一个布尔值，表示是否应该应用该类。
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
当 isActive 为 true 时，类 active 会被应用。
当 hasError 为 true 时，类 text-danger 会被应用。
1.2、:class[] 数组语法
数组语法允许你将多个类作为一个数组传递。可以是字符串数组或对象数组。
<div :class="['static-class', isActive ? 'active' : '', { 'text-danger': hasError }]"></div>
‘static-class’ 始终会被应用。
当 isActive 为 true 时，类 active 会被应用，否则为空字符串。
当 hasError 为 true 时，类 text-danger 会被应用。
2、watch
watch 监听单个数据；键：就是那个，你要监听的那个家伙；值：可以是函数，当你监控的家伙发生变化时，需要执行的函数，这个函数有两个形参（第一个是当前值（新的值），第二个是更新前的值（旧值））。
<div id="app">
<p>{{num}}</p>
<button @click="num++">点击加一</button>
</div>
let vm = new Vue({
el:'#app',
data:{
num:0
},
watch:{
// 当前值（已经改变的值）newval 旧值 oldval
num:function(newval,oldval){
console.log("新值是："+newval);
console.log("旧值是："+oldval);
}
}
})
3、v-show
v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件，语法如下：
v-show="判断变量"
v-show=“true”，表示显示DOM元素。
v-show=“false”， 表示隐藏DOM元素。
<div id="app">
<img src="img/1.jpg" v-show="isShow,age>18" >
<input type="button" value="切换显示状态" @click="changeIsshow">
</div>
<script>
//创建vue实例
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:19
},
methods:{
changeIsshow:function () {
this.isShow = !this.isShow;
}
},
})
</script>
