一、 :class样式的绑定
属性名是类选择器的名称，属性值是true/false，为真显示对应样式，为假无。
两个方法效果同等，使用对象的方法添加更显优雅，看个人习惯！
1. :class样式绑定对象写法
<div class="box" :class="{bgColor:bgColor,fontColor:fontColor,border:border}">
2. :class使用数组三元表达式添加样式，可添加多个
<div class="box" :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',border?'border':'']">
二、：style样式的绑定
属性名是指定样式的属性名，属性值是通过变量去获取的对应的属性值
<div class="box" :style="{backgroundColor:bgc,fontColor:ftc}">
小案例：
通过:style和双向绑定，根据用户输入的值，改变字体和背景的颜色
<div id="app">
<div class="box" :style="{backgroundColor:bgc,fontColor:ftc}">
<input type="text" v-model="bgc">
<input type="text" v-model="ftc">
</div>
new Vue({
el:'#app',
data:{
activeIndex:0,
bgc:'red',
ftc:'black'
}
})
三、计算属性 computed
一般我们在插值表达式和指令身上不要写过多的逻辑代码，而是展示结果
<p>返回姓名：<input type="text" :value="firstName+'.'+lastName"></p>
解决这种情况有两种方法
1.通过方法去做
和data同层级放置，它有个特点是页面数据只要有变动它就会执行一次。
methods:{
fullName2(){
console.log('我是方法');
return this.firstName+'.'+this.lastName
}, }
2.计算属性
（1）和data同层级放置，在computed里面定义的是方法，在模板中当属性使用
（2）计算属性的特点是有缓存，当计算属性用到的数据发生变化时，计算属性才会重新执行
（3）计算属性默认只能读，不能改
computed:{
fullName(){
console.log('我是计算属性');
return this.firstName+'.'+this.lastName
}
}
3.完整结构的计算属性
使用v-model绑定计算属性
<p>计算属性返回姓名：<input type="text" v-model="fullName"></p>
get方法用于返回计算属性的值
set方法用于修改计算属性的值
computed:{
fullName:{
get(){
return this.firstName+'.'+this.lastName
},
set(val){
console.log(val);
let arr=val.split('.')
this.firstName=arr[0]
this.lastName=arr[1]
} } },
总结：当一个属性既可以用计算属性也可以用方法做时，优先选择计算属性
四、Vue侦听器watch
1.数据侦听器，当发现监听的数据发生变化时，执行该该函数。函数名是要监听属性名
①和data同层级放置，这个方法有两个参数，第一参数是新值，第二个参数是旧值
<p>姓名：<input type="text" v-model="name"></p>
<p>年龄：<input type="text" v-model="age"></p>
watch:{
name(nval,oval){
console.log(11);
},
age(nval,oval){
console.log(nval,oval);
}
2.开启深度监视
（1）想要改变属性的时候也能监听到，就要开始深度监视deep:true。并且需要把以前的方法改成对象
（2）开启深度监视后只能打印最新值，因为只是重新设置了这个对象，并没有换对象，对象是引用类型。
<button @click="resetStundent">修改学生对象</button>
methods: {
resetStundent(){
this.student={
name:'七七',
age:19,
sex:'男'
} }},
watch:{
student:{
deep:true, //代表开启深度监视
handler(navl,oval){
console.log(nval,oval);
}}}
错误示范：
只是这样的话监听的是这个对象，里面的属性虽然发生变化但还是这个人，所以修改里面的属性不会触发这个方法
watch:{
student(nval,oval){
console.log(nval,oval);
}
3.计算属性也有监听的能力
（1）当前计算属性里面用到数据发生变化时，会重新执行计算属性
（2）计算属性必须要在模板中使用
<p>姓名：<input type="text" v-model="name">{{myName}}</p>
computed:{
myName(){
console.log(this.name);
return this.name
} }
五、过滤器filters
1.过滤器在模板中通过管道符 | 的方式来调用
（1）其实就是调用方法将值传进去，再返回新的值，背后的原理和methods一样.只不过看起来更优雅一点
<p>商品价格(人民币)：{{goods.price | toFixed2 | toRMB }}</p>
<p>商品价格(美元)：{{goods.price | toUS }}</p>
filters:{
toFixed2(val){
return val.toFixed(2)
},
toRMB(val){
return '￥'+val
},
toUS(val){
return '$'+(val/6.5).toFixed(2)
}
}
2.全局过滤器
（1）通常全局过滤器都单独放一个文件夹，在项目下新建filer文件->index.js
Vue.filter('toFixed2',function(val){
return val.toFixed(2)
})
（2）在需要的页面引入即可使用
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="./filter/index.js"></script>
<script>
