Vue——计算属性&侦听器&过滤器
好看的网页千篇一律，有趣的代码万里挑一。
今天一起学习：计算属性&侦听器&过滤器
1. 绑定样式
<div id="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>背景色：<input type="text" v-model="bgc"></p>
<p>字体色：<input type="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>
2. 计算属性
new Vue({
el:'#app',
data() {
return {
// 是否显示蓝色背景
bg_b:false,
// 是否显示白色字体
c_w:false,
// 该数组中，用于存储类选择器的名称
arr:[],
// 定义背景色
bgc:'orange',
// 定义字体颜色
c:'red',
list:['保时捷','玛莎拉蒂','雷克萨斯','吉利'],
// 定义一个高亮索引
activeIndex:0
}
},
})
new Vue({
el:'#app',
data() {
return {
firstName:'王',
lastName:'瑞',
students:[
{
name:'张三',
sex:'男',
age:12
},
{
name:'李四',
sex:'女',
age:13
},
{
name:'王五',
sex:'男',
age:15
}
]
}
},
methods: {
// 定义一个方法，返回姓名
getName(){
return this.firstName+'.'+this.lastName
}
},
// 计算属性，计算属性本质上其实是方法
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]
}
}
},
// 计算学生的平均年龄
avgAge(){
return (this.students.reduce((c,s)=>{
return c+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. 过滤器
<!-- 第一个容器 -->
<div id="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}} <input type="text" :value="goods2.price | toRMB"></h4>
<h4>价格：{{goods2.price | toUS}} <input type="text" :value="goods2.price | toUS"></h4>
</div>
<div>=================================================</div>
<!-- 第二个容器 -->
<div id="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){
return val.split('').reverse().join('')
})
// 该Vue实例操作第一个容器
new Vue({
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实例操作第二个容器
new Vue({
el:'#app2',
data() {
return {
// 商品一
goods1:{
name:'娃哈哈奶茶',
price:25
},
message:'欢迎光临本店，所有商品一律8折'
}
},
})
