三、计算属性&侦听器&过滤器
1. 绑定样式
<divid="app"><button@click="bg_b=true">显示蓝色背景</button><button@click="c_w=true">显示白色字体</button><!-- :class可以绑定一个对象，对象的属性名是类选择器的名称，属性值返回true，表示添加该选择器。 --><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><!-- :class可以绑定字符串一个数组，数组中的每一个元素就是一个选择器 --><div:class="arr">好好学习Vue</div><!-- :class可以直接绑定一个表示 --><div:class="bg_b?'bg_b':''">好好学习Vue</div><!-- :class也可以通过数组绑定多个表达式 --><div:class="[bg_b?'bg_b':'',c_w?'c_w':'']">好好学习Vue</div><hr><p>背景色：<inputtype="text"v-model="bgc"></p><p>字体色：<inputtype="text"v-model="c"></p><!-- :class是绑定类选择器，:style是绑定内联样式。
:style通常也是绑定一个对象，对象的属性名是原生CSS的属性名，但是要采用小驼峰命名规范。 --><div:style="{backgroundColor:bgc,color:c}">好好学习Vue</div><br><!-- 小练习：实现点谁，谁高亮 --><ul><li@click="activeIndex=index"v-for="(item,index) in list":key="index":class="{active:activeIndex===index}">{{item}}</li></ul></div>
newVue({el:'#app',data(){return{// 是否显示蓝色背景bg_b:false,// 是否显示白色字体c_w:false,// 该数组中，用于存储类选择器的名称arr:[],// 定义背景色bgc:'orange',// 定义字体颜色c:'red',list:['保时捷','玛莎拉蒂','雷克萨斯','吉利'],// 定义一个高亮索引activeIndex:0}},})
2. 计算属性
<divid="app"><p>姓：<inputtype="text"v-model="firstName"></p><p>名：<inputtype="text"v-model="lastName"></p><!-- 通常情况下，我们喜欢插值表达式里面，不要写过多的逻辑代码，而是直接展示结果 --><p>姓名：{{firstName+'.'+lastName}}</p><!-- 插值表达式中可以调用方法，并显示方法的返回结果 --><p>姓名：{{getName()}}</p><!-- 这里调用的是计算属性，计算属性本质上是方法，在模板中当前属性去使用。 --><p>姓名：{{fullName}}</p><p>姓名：<inputtype="text"v-model="fullName2"></p><hr><ul><liv-for="(item,index) in students":key="index">{{item.name}}--{{item.sex}}--{{item.age}}</li><li>平均年龄是：{{avgAge}}</li></ul></div>
newVue({el:'#app',data(){return{firstName:'王',lastName:'瑞',students:[{name:'张三',sex:'男',age:12},{name:'李四',sex:'女',age:13},{name:'王五',sex:'男',age:15}]}},methods:{// 定义一个方法，返回姓名getName(){returnthis.firstName+'.'+this.lastName}},// 计算属性，计算属性本质上其实是方法computed:{// 在这里，我们定义的是方法，只不过这方法在模板中，可以当做属性来使用fullName(){returnthis.firstName+'.'+this.lastName},// 计算属性的简单写法，就是定义一个方法，由该方法返回出去一份结果，所有它是只读的。// 如果要修改计算属性的值，就要使用完整的写法fullName2:{// get方法，返回计算属性的结果get(){returnthis.firstName+'.'+this.lastName},// set方法，修改计算属性的结果，该方法接收一个参数是最新的值set(val){if(val.indexOf('.')!==0){letarr=val.split('.')this.firstName=arr[0]this.lastName=arr[1]}}},// 计算学生的平均年龄avgAge(){return(this.students.reduce((c,s)=>{returnc+s.age},0)/this.students.length).toFixed(2)}}})
3. 数据侦听器
<div id="app">
<p>姓名：<input type="text" v-model="name"></p>
<p>年龄：<input type="text" v-model="age"></p>
<hr>
<p>员工姓名：<input type="text" v-model="emp.name"></p>
<p>员工年龄：<input type="text" v-model="emp.age"></p>
<p>员工汽车名称：<input type="text" v-model="emp.car.name"></p>
<p>员工汽车价格：<input type="text" v-model="emp.car.price"></p>
</div>
new Vue({
el:'#app',
data(){
return {
name:'王瑞',
age:20,
// 定义一个对象
emp:{
name:'张勇杰',
age:20,
// 员工的汽车对象
car:{
name:'奔驰',
price:'50W'
}
}
}
},
// 侦听器
watch:{
// 要侦听哪个属性，就以那个属性的名称为方法名，定义一个方法,
// 当属性的值发生变化时，该方法就会执行。
// 该方法，有两个参数，第一个参数是新值，第二参数是旧值
name(nval,oval){
console.log('name属性值发生变化了',nval,oval);
},
// 侦听emp对象是否发生了变化
// 如果要实现深度侦听对象的变化，就需要使用完整的写法，定义一个对象
// 在对象中，通过deep属性设置深度监视
emp:{
// 深度监视
deep:true,
// 设置监视器，默认执行一次
immediate:true,
// 通过handler定义监视器的方法
handler(nval,oval){
console.log('员工信息发生变化了',nval,oval);
}
}
}
})
4. 过滤器
<!-- 第一个容器 --><divid="app"><h2>{{goods1.name}}</h2><h4>价格：{{rmb_price}}</h4><h4>价格：{{us_price}}</h4><h4>价格：{{goods1.price | toRMB}}</h4><h4>价格：{{goods1.price | toUS}}</h4><hr><h2>{{goods2.name}}</h2><!-- 过滤器只能在插值表达式 和 v-bind表达式中使用。通过“管道符” | 指定使用具体的过滤器。
原理就是将“管道符”左边的值传给“管道符”右边的方法去处理，并返回处理过后的结果。 --><h4>价格：{{goods2.price | toRMB}}<inputtype="text":value="goods2.price | toRMB"></h4><h4>价格：{{goods2.price | toUS}}<inputtype="text":value="goods2.price | toUS"></h4></div><div>=================================================</div><!-- 第二个容器 --><divid="app2"><h2>{{goods1.name}}</h2><h4>价格：{{goods1.price | toRMB}}</h4><h4>价格：{{goods1.price | toUS}}</h4><h2>{{message}}</h2><h2>{{message | strReverse}}</h2></div>
// 定义过滤器有两种方式：局部过滤器，全局过滤器// 局部过滤器，只是当前Vue实例可以访问// 全局过滤器，所有的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){returnval.split('').reverse().join('')})// 该Vue实例操作第一个容器newVue({el:'#app',data(){return{// 商品一goods1:{name:'苹果手机',price:8666,},// 商品二goods2:{name:'小米电视',price:8848}}},computed:{// 定义一个计算属性，返回人民币价格// 计算属性一般用于针对性的计算，假设我们有很多数据要计算，就不太方便了。rmb_price(){return'¥'+this.goods1.price.toFixed(2)},// 定义一个计算属性，返回美金价格us_price(){return'$'+(this.goods1.price/6.4634).toFixed(2)}},// 定义过滤器 (局部过滤器，里面定义的过滤器只是当前Vue实例可以访问)/* filters:{
// 每个过滤器其实，也是一个方法，该方法接收一个参数。
// 对参数进行过滤，然后重新返回。
toRMB(val){
return '¥'+val.toFixed(2)
},
toUS(val){
return '$'+(val/6.4634).toFixed(2)
}
} */})// 该Vue实例操作第二个容器newVue({el:'#app2',data(){return{// 商品一goods1:{name:'娃哈哈奶茶',price:25},message:'欢迎光临本店，所有商品一律8折'}},})
