番外篇：VUE（七）计算属性和侦听器、过滤器
计算属性（computed）
1、做字符处理或者运算
2、为了将不经常变化的计算结果缓存起来，节约我们的 系统开销，可以想象为缓存
示例1
<body>
<!--3：挂载vue对象-->
<div id="app">
<!--方法的调用:从方法中重新执行得到数据-->
<p>{{nowtime01()}}</p>
<!--缓存的调用:从内存中加载数据-->
<p>{{nowtime02}}</p>
</div>
<script>
/*2：定义一个Vue对象*/
var vm = new Vue({
el: "#app",
data:{
message:'hello.vue'
},
/*定义方法：每次调用都会重新执行*/
methods:{
nowtime01:function () {
return this.message.substring(0,4);
}
},
/*定义缓存：会把数据放到内存中，只有数据变化时才会进行一次更新*/
computed:{
nowtime02:function () {
return this.message.substring(0,4);
}
}
});
</script>
</body>
示例2
<body>
<!--3：挂载vue对象-->
<div id="app">
<ul>
<li>西游记：价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjnum"> </li>
<li>水浒传：价格：{{shzPrice}}，数量：<input type="number" v-model="shznum"> </li>
<li>总价：{{zongjia}}</li>
</ul>
</div>
<script>
/*2：定义一个Vue对象*/
var vm = new Vue({
/*页面DOM元素 挂载目标*/
el: "#app",
/*要显示的数据*/
data: {
xyjPrice:50,
shzPrice:30,
xyjnum:1,
shznum:1
},
/*计算总价*/
computed:{
zongjia(){
return this.xyjPrice*this.xyjnum+this.shzPrice*this.shznum;
}
}
});
</script>
</body>
监听（watch）
<body>
<!--3：挂载vue对象-->
<div id="app">
<ul>
<li>西游记：价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjnum"> </li>
<li>水浒传：价格：{{shzPrice}}，数量：<input type="number" v-model="shznum"> </li>
<li>总价：{{zongjia}}</li>
</ul>
</div>
<script>
/*2：定义一个Vue对象*/
var vm = new Vue({
/*页面DOM元素 挂载目标*/
el: "#app",
/*要显示的数据*/
data: {
xyjPrice:50,
shzPrice:30,
xyjnum:1,
shznum:1
},
/*计算总价*/
computed:{
zongjia(){
return this.xyjPrice*this.xyjnum+this.shzPrice*this.shznum;
}
},
//监听xyjnum这个属性的值，newVal变化后的值，oldVal为当前值
watch:{
xyjnum:function(newVal,oldVal){
if(newVal>3){
alert("西游记超过当前库存3");
this.xyjnum = 3;
}
}
}
});
</script>
过滤（filter）
<body>
<!--3：挂载vue对象-->
<div id="app">
<ul v-for="user in users">
<!-- {{user.gender | genderfilter}} 调用filter 并把当前值作为参数传递进去 -->
<li>{{user.id}}==>{{user.name}}==>{{user.gender | genderfilter}}</li>
</ul>
</div>
<script>
/*2：定义一个Vue对象*/
var vm = new Vue({
/*页面DOM元素 挂载目标*/
el: "#app",
/*要显示的数据*/
data: {
users:[
{id:1,name:"张三",gender:1},
{id:2,name:"李四",gender:2}
]
},
//判断把数字转换为指定的值
filters:{
genderfilter(val){
if(val==1){
return "男"
}else{
return "女"
}
}
}
});
</script>
</body>
