1.:class绑定样式
:class绑定样式时，对象的属性名是类选择器名称，属性值返回true，表示添加该选择器
例：当点击一个按钮时，把文字背景变换颜色
<button @click="bgColor=true">添加背景颜色</button>
<button @click="fontColor=true">添加文本颜色</button>
使用属性值绑定样式
<div :class="{bgColor:bgColor,fontColor:fontColor}">好好学习Vue</div>
使用表达式绑定样式
<div :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',]">好好学习Vue</div>
data中的数据
data:{
bgColor:false,
fontColor:false,
}
:style绑定样式
:style绑定样式时，对象的属性名称是css样式的名称（要使用小驼峰命名法），属性值是具体的样式值
<div class="box1" :style="{backgroundColor:bgc,color:fc}">好好学习
2.计算属性:computed
computed属性是基于响应式依赖进行缓存,只在相关响应式依赖发生改变时它们才会重新求值。在面对复杂逻辑时，应当用计算属性。computed属性也有侦听的能力
<div id="app">
{computedMessage}}
{computedMessage}}
{computedMessage}}
<hr>
{{methodsMessage()}}
{{methodsMessage()}}
{{methodsMessage()}}
<button type="button">查看执行几次</button>
</div>
<script src="../js/vue.js"></script>
<script>
let computedCount = 0;
let methodsCount = 0;
let app = new Vue({
el: "#app",
data: {
num1: 100,
num2: 100,
},
computed: {
computedMessage() {
computedCount++;
return this.num1 + this.num2;
}
},
methods: {
methodsMessage() {
methodsCount++;
return this.num1 + this.num2;
}
}
})
document.querySelector("button").addEventListener("click", () => {
console.log(`computed调用${computedCount}次`);
console.log(`methods调用${methodsCount}次`);
})
</script>
执行结果：
每一个计算属性都包含一个get与一个set，computed属性默认只有get，不过在需要时可以自己提供一个set函数，当手动修改计算属性的值时，就会触发set函数，执行自定义的操作。
<div id="app">
<p>姓：<input type="text" v-model="firstName"></p>
<p>名：<input type="text" v-model="lastName"></p>
<p>计算属性返回姓名：<input type="text" :value="fullName"></p>
</div>
<script src="[https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js](https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js)"></script>
<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
},
computed: {
fullName:{
get(){
return this.firstName+'.'+this.lastName
},
set(val){
let arr = val.split('.')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
3.侦听器：watch
watch ()提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有效的。
watch:{
//根据属性的名称，定义一个方法，用于侦听该属性的变化
//这个方法，可以传两个参数，第一个参数是最新值，第二个参数是旧值
name(nval,oval){
console.log(nval,oval);
},
// 侦听对象，需要开启深度监视
student:{
//开启深度监视
deep:true,
//页面加载完成时，先运行一次（注意：这种情况下，旧值是undefined）
immediate:true,
//定义监视的函数
handler(nval,oval){
// 开启深度监视后，旧值已经没有意义，因为对象是引用类型，
// 对象的属性值已经改了，就没有旧的属性值。
console.log(nval,oval);
}
}
}
computed与watch的区别
（1）：computed是同步的，watch可以实现异步
（2）：computed中的函数都是带返回值的，wacth里面的函数可以不写返回值。
4.过滤器:filters
使用方法
<p>商品价格(人民币)：{{goods.price | toFixed2 | toRMB}}
filters:{
// 过滤在模板中通过管道符 | 的方式来调用
toFixed2(val){
return val.toFixed(2)
},
//返回人民币数据
toRMB(val){
return '￥'+ val
},
}
全局过滤器和局部过滤器重名时，会采用局部过滤器
