系列文章目录
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
Vue的监视属性和计算属性的区别
前言
提示:这里可以添加本文要记录的大概内容:
Vue的监视属性语法,改如何运用
一、监视属性和计算属性的区别
下面我直接用案例来一起看这两个的区别
二、实例
1.监视属性
代码如下(示例):
<body>
<div class="root">
<h1>{{title}}</h1>
<input placeholder="请输入关键字" v-model="keyword" />
<ul v-for="x,y in newarr" :key="x.id">
<li>{{x.name}}-{{x.age}}-{{x.sex}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'.root',
data:{
keyword:'',
title:'人员列表',
arr:[
{id:'1',name:'周冬雨',age:'18',sex:'女'},
{id:'2',name:'周杰伦',age:'19',sex:'男'},
{id:'3',name:'李冬梅',age:'20',sex:'女'},
{id:'4',name:'温兆伦',age:'22',sex:'男'}
],
newarr:[]
},
watch:{
keyword:{
immediate:true,//初始就会调用
handler(val){//可以获得新旧两个值
this.newarr = this.arr.filter((y)=>{
return y.name.indexOf(val) !== -1
})
}
}
}
})
</script>
2.计算属性
代码如下(示例):
<script type="text/javascript">
new Vue({
el:'.root',
data:{
keyword:'',
title:'人员列表',
arr:[
{id:'1',name:'周冬雨',age:'18',sex:'女'},
{id:'2',name:'周杰伦',age:'19',sex:'男'},
{id:'3',name:'李冬梅',age:'20',sex:'女'},
{id:'4',name:'温兆伦',age:'22',sex:'男'}
],
},
computed:{
newarr(){
return this.arr.filter((y)=>{
return y.name.indexOf(this.keyword) !== -1
})
}
}
})
</script>
结果