1.绑定样式
<div id="app">
<button @click="bg_b=true">显示蓝色背景</button>
<button @click="c_w=true">显示白色字体</button>
<div :class="{bg_b:bg_b,c_w:c_w}">好好学习Vue</div>
<button @click="arr.push('bg_p')">显示粉色背景</button>
<button @click="arr.push('c_g')">显示绿色字体</button>
<div :class="arr">好好学习Vue</div>
<div :class="bg_b?'bg_b':''">好好学习Vue</div>
<div :class="[bg_b?'bg_b':'',c_w?'c_w':'']">好好学习Vue</div>
<p>背景色：<input type="text" v-model="bgc"></p>
<p>字体色：<input type="text" v-model="c"></p>
<div :style="{backgroundColor:bgc,color:c}">好好学习Vue</div>
<ul>
<li @click="activeIndex=index" v-for="(item,index) in list" :key="index" :class="{active:activeIndex===index}">{{item}}</li>
</ul>
</div>
2.计算属性
计算属性的优势：有缓存，当页面数据发生变化时，所有的方法都要重新执行
当计算属性用到的数据发生变化时，计算属性才会重新执行
计算属性，计算属性本质上其实是方法
computed:{
在这里，我们定义的是方法，只不过这方法在模板中，可以当做属性来使用
******(){
},
计算属性的简单写法，就是定义一个方法，由该方法返回出去一份结果，所有它是只读的。
如果要修改计算属性的值，就要使用完整的写法
*****:{
// get方法，返回计算属性的结果
get(){
},
// set方法，修改计算属性的结果，该方法接收一个参数是最新的值
set(val){
},
3.监视器
watch: {
根据属性的名称，定义一个方法，用于侦听该属性的变化
这个方法会传两个参数，第一个是最新值，第二个是旧值
**(nval, oavl) {
比如当属性发生变化时，重新发生ajax请求获取新的数据
console.log(nval, oavl);
},
****() {
console.log(nval, oavl);
}
侦听对象：需要开启深度监视
student: {
开启深度监视
deep: true,
页面加载完成时，先运行一次（这种情况下，旧值时undefined）
immediate:true,
定义监视的函数
handler(nval, oavl) {
开启深度监视后，旧值已经没有意义，因为对象是引用类型，
对象的属性值已经改了，就没有旧的属性值
console.log(nval, oavl);
}
}
},
计算属性，也有监视能力
computed:{
//当计算属性用到的数据发生变化时，会重新执行计算属性
//只是计算属性必须要在模板中使用
myAge(){
console.log(this.age);
return this.age
}
}
})
4.过滤器
定义过滤器
filters: {
过滤器通关管道符 | 的方式调用
toFixed2(val) {
return val.toFixed(2)
},
返回人民币数据
toRMB(val) {
return '￥' + val
},
toUS(val) {
return '$' + (val / 6.5).toFixed(2)
}
}
})
通过管道符 | 调用过滤器 其实就是调用那个方法，把值传进去，再返回新的值
<p>商品价格(人民币):{{goods.price | toFixed2 | toRMB}}
过滤器可以链式调用，就是之前已经过滤完成的结果，继续传给下一个过滤器，注意顺序
<p>商品价格(美元):{{goods.price | toFixed2 | toUS}}
引入外部js，里面定义的是全局过滤器
<script src="./filter/index.js"></script>
定义全局过滤器
如果局部过滤器和全局过滤器冲突，局部过滤器优先级更高
Vue.filter('toFixed2', function(val){
return val.toFixed(2)
})
