文章目录
- 列表更新
- 数组更新检测
列表更新
数组更新检测
变更方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>列表更新</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- Vue数据绑定的原理：1. Vue会监视data中所有层次对象的属性2. 对象中的属性数据通过添加set方法来实现监视3. 数组中也实现了监视：重写数组一系列更新元素的方法，做了2件事：1).调用原生对象的方法对数组进行处理2).去更新页面--><!-- 准备一个容器 --><div id="root"><h2>人员列表</h2><input v-model="keyWord" type="text" placeholder="请输入姓名" /><button @click="sortType = 1">年龄升序↑</button><button @click="sortType = 2">年龄降序↓</button><button @click="sortType = 0">原顺序</button><button @click="updateMei">更改马冬梅的信息</button><ul><li v-for="(p,index) in fmtPersons">{{p.name}}---{{p.sex}}---{{p.age}}岁</li></ul></div><script>new Vue({el: "#root",data: {keyWord: "",sortType: 0, // 0原顺序 1升序 2降序persons: [{ id: "001", name: "马冬梅", age: 20, sex: "男" },{ id: "002", name: "周冬雨", age: 29, sex: "女" },{ id: "003", name: "周杰伦", age: 32, sex: "男" },{ id: "004", name: "温兆伦", age: 50, sex: "女" },],},// 使用computed优势，列表过滤不影响// 计算属性（keyWord变时，调用fmtPersons）computed: {fmtPersons() {const { persons, keyWord, sortType } = this;// 1.根据关键词过滤let arr = persons.filter((p) => p.name.indexOf(keyWord) !== -1);// 2.如果需要排序(sort影响原数组)if (sortType) {// 排序arr.sort((a, b) => {if (sortType === 1) return a.age - b.age;else return b.age - a.age;});}// 3.返回结果return arr;},},methods: {updateMei() {// this.persons[0].name = "小佩奇";// this.persons[0].age = "100";// this.persons[0].sex = "女";this.persons[0] = { name: "小佩奇", age: "10", sex: "男" }; // Vue检测不到 需要push一下console.log("====", this.persons[0]);this.persons.push();},},});</script></body>
</html>
