计算属性和侦听属性
计算属性:computed
侦听属性:watch
computed和watch区别:
1.computed能完成的，watch一定能完成。
2.watch能完成的，computed不一定能完成，watch可以进行异步操作。
注意:
所有被vue管理的函数(methods,computed,watch函数),最好写成普通函数，这样this的指向
才是vm或组件实例对象。
所有不被vue所管理的函数(定时器回调函数，ajax回调函数，Promise回调函数),写成箭头函数，
这样this的指向才是vm或组件实例对象。
深度监视:
vue中的watch默认不监测对象内部值的改变(一层)
配置deep:true,可以监测对象内部值的改变(多层)
备注:
vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以。
使用watch时根据数据的具体解构，决定是否采用深度监视。
计算属性实现筛选，升序降序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="add">
<input type="text" v-model="keyword">
<button @click="sortType=1">年龄升序</button>
<button @click="sortType=2">年龄降序</button>
<button @click="sortType=0">原顺序</button> <br>
<ul v-for="(item,index) in list" :key="index">
<li>
{{item.name}}-{{item.age}}-{{item.sex}}
</li>
</ul>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#add',
data() {
return {
keyword: '',
sortType: 0, //1升序 2.降序 0原来的顺序
add: [
{ name: '刘华强', age: '40', sex: '男' },
{ name: '封彪', age: '49', sex: '男' },
{ name: '吴天', age: '54', sex: '男' },
{ name: '大海', age: '46', sex: '男' },
],
};
},
computed: {
list() {
var arr = this.add.filter(item => {
return item.name.indexOf(this.keyword) !== -1
})
if (this.sortType) {
// 1.升序 2.降序
arr.sort((a, b) => {
return this.sortType == 1 ? a.age - b.age : b.age - a.age
})
}
return arr;
}
}
})
</script>
侦听属性实现筛选，升序降序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="add">
<input type="text" placeholder="输入姓名" v-model="keyword">
<button @click="sortType=1">年龄升序</button>
<button @click="sortType=2">年龄降序</button>
<button @click="sortType=0">原顺序</button>
<ul v-for="(item,index) in list" :key="index">
<li>
{{item.name}}--{{item.age}}--{{item.sex}}
</li>
</ul>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#add',
data() {
return {
keyword: '',
list: [],
sortType: 0,
add: [
{ name: '刘华强', age: '40', sex: '男' },
{ name: '封彪', age: '49', sex: '男' },
{ name: '吴天', age: '54', sex: '男' },
{ name: '大海', age: '46', sex: '男' },
]
};
},
watch: {
keyword: {
immediate: true,
handler(val) {
this.list = this.add.filter(item => {
return item.name.indexOf(val) !== -1
})
}
},
sortType: {
handler(val) {
if (val) {
this.list.sort((a, b) => {
return val == 1 ? a.age - b.age : b.age - a.age
})
} else {
// 直接赋值，this.list和this.name会用同一个地址
// 转成字符串，然后再恢复到数组，this.list和this.name地址就不同了
this.list = JSON.parse(JSON.stringify(this.add))
}
}
}
}
})
</script>
3927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
