1st.绑定样式
:class="{active:activeIndex===index}"
对象里面属性名是class类选择器名，属性值是布尔值，当布尔值是true时绑定前面的class
:class="[activeIndex1===index?'active':''",activeIndex2===index?'active':''",activeIndex3===index? 'active':''",]"
绑定样式还可以写数组，数组里用三元表达式表示需要绑定的class类选择器名
:class="activeIndex===index?'active':''""
当只有一个class类选择器需要绑定时，三元表达式也可以直接写
:style="{backgroundColor:bc,color:fc}"
绑定行内样式时，属性名是样式类型，属性值可以用data里面声明的变量来表示
2nd.计算属性
当页面中绑定的数据发生变化时，因为不确定改变的数据，所以绑定数据的所有方法都会执行一遍，而计算属性因为有缓存，所以只有发生改变的那个计算熟悉会执行。
计算属性声明：
// 计算属性，计算属性本质上其实是方法
computed:{
// 在这里，我们定义的是方法，只不过这方法在模板中，可以当做属性来使用
fullName(){
return this.firstName+'.'+this.lastName
},
// 计算属性的简单写法，就是定义一个方法，由该方法返回出去一份结果，所有它是只读的。
// 如果要修改计算属性的值，就要使用完整的写法
fullName2:{
// get方法，返回计算属性的结果
get(){
return this.firstName+'.'+this.lastName
},
// set方法，修改计算属性的结果，该方法接收一个参数是最新的值
set(val){
if(val.indexOf('.')!==0){
let arr = val.split('.')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
},
使用计算属性：
<!-- 这里调用的是计算属性，计算属性本质上是方法，在模板中当前属性去使用。 -->
<p>姓名：{{fullName}}</p>
3rd.数据侦听器
要侦听哪个属性，就以那个属性的名称为方法名，定义一个方法,
当属性的值发生变化时，该方法就会执行。
watch:{
// 该方法，有两个参数，第一个参数是新值，第二参数是旧值
name(nval,oval){
console.log('name属性值发生变化了',nval,oval);
},
}
如果要实现深度侦听对象的变化，就需要使用完整的写法，定义一个对象
在对象中，通过deep属性设置深度监视
immediate 设置监视器默认执行一次
// 侦听emp对象是否发生了变化
emp:{
// 深度监视
deep:true,
// 设置监视器，默认执行一次
immediate:true,
// 通过handler定义监视器的方法
handler(nval,oval){
console.log('员工信息发生变化了',nval,oval);
}
}
4rd. 过滤器
定义过滤器有两种方式：局部过滤器，全局过滤器
局部过滤器，只是当前Vue实例可以访问
全局过滤器，所有的Vue实例都可以访问
定义过滤器
局部过滤器，里面定义的过滤器只是当前Vue实例可以访问，优先使用局部过滤器
filters:{
// 每个过滤器其实，也是一个方法，该方法接收一个参数。
// 对参数进行过滤，然后重新返回。
toRMB(val){
return '¥'+val.toFixed(2)
},
toUS(val){
return '$'+(val/6.4634).toFixed(2)
}
}
全局过滤器，所有的Vue实例都可以访问
Vue.filter('toRMB', function(val){
return '¥'+val.toFixed(2)
})
Vue.filter('toUS', function(val){
return '$'+(val/6.4634).toFixed(2)
})
Vue.filter('strReverse', function(val){
return val.split('').reverse().join('')
})
使用过滤器
过滤器只能在插值表达式 和 v-bind表达式中使用。通过“管道符” | 指定使用具体的过滤器。原理就是将“管道符”左边的值传给“管道符”右边的方法去处理，并返回处理过后的结果。
<h4>价格：{{goods2.price | toRMB}} <input type="text" :value="goods2.price | toRMB"></h4>
