**关于computed的计算属性是否改变data的原来的值,废话不说直接上代码,实现一个搜索
// DOM代码
<div id="app">
<input type="text" placeholder="请输入姓名" @input="setName" v-model="name" />
<ul v-for="(item, index) in nameList">
<li :key="item">{{item}}---{{index}}</li>
</ul>
</div>
// vue实例对象
var vm = new Vue({
el: "#app",
data: {
name: '',
nameList: ['狮子', '大象', '老虎']
},
methods: {
setName () {
this.nameList = this.nameList.filter(item => {
return item.indexOf(this.name) > -1
})
}
}
})
**你会发现搜索可以,但是清除的话回不去了,下面咱们用另外一个vue实例实现一下
var vm = new Vue({
el: "#app",
data: {
name: '',
nameList: ['狮子', '大象', '老虎'],
lowNameList: ['狮子', '大象', '老虎']
},
methods: {
setName () {
let newArr = this.lowNameList.filter(item => {
return item.indexOf(this.name) > -1
})
this.nameList = newArr
}
}
})
**可以看到可以了,因为咱们使用了一个新数组去赋值的
**下面咱们用计算属性来看一下
<div id="app">
<input type="text" placeholder="请输入姓名" v-model="name" />
<ul v-for="(item, index) in getNameList">
<li :key="item">{{item}}---{{index}}</li>
</ul>
<hr />
</div>
var vm = new Vue({
el: "#app",
data: {
name: '',
nameList: ['狮子', '大象', '老虎']
},
computed: {
getNameList () {
return this.nameList.filter(item => {return item.indexOf(this.name) > -1})
}
}
})
**可以看到也是可以实现的,关键是这个getNameList这个方法,它返回的是过滤的数据心数组,对原来的数组nameList没有做任何更改,所以computed计算属性是不能修改data里面的数据的