二，vue中列表排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div> <input type="text" v-model="searchInput" name="" id=""> <button @click="paixu(1)">升序</button> <button @click="paixu(2)">降序</button> <button @click="paixu(3)">原序列</button> <div v-for="(item,index) in searchList"> {{item.name}}--{{item.price}} </div> </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:'#app', data(){ return{ keyword:0, // 用来排序 searchInput:"", goodList:[ {name:'牛仔裤',price:200}, {name:'运动鞋',price:100}, {name:'跑步鞋',price:300}, {name:'篮球鞋',price:400}, ], } }, methods:{ paixu(val){ this.keyword=val } }, computed:{ searchList(){ // 把goodList的内容过滤，把符合条件的形成一个新的数组 // filter是数字的过滤方法，这个方法的参数是一个函数，此函数返回true，则把此项返回新的数组中 let list = this.goodList.filter((item)=>{ return item.name.indexOf(this.searchInput)!==-1 }) if(this.keyword){ list.sort((a1,a2)=>{ return this.keyword === 1 ? a1.price - a2.price : a2.price - a1.price }) } return list } } }) </script> </html>
2.1，vue中数据更新的问题
2.1-1，对象新增数据更新问题
- 描述
- 通过普通对象添加属性方法，Vue不能监测到且不是响应式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div v-for="(attr,key) in person"> {{key}} -- {{attr}} </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:'#app', data(){ return{ person:{ name:'张三', sex:'男', } } }, }) </script> </html>
这样添加它没有没有跟对象一样封装有监测数据变化的getter、setter
- 解决
- Vue.set() / this.$set
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div v-for="(attr,key) in person"> {{key}} -- {{attr}} </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:'#app', data(){ return{ person:{ name:'张三', sex:'男', } } }, }) </script> </html>
- 注意
- this.$set不能给vue实例的根数据对象添加属性
2.1-1，数组数据更新问题
- 描述
- 直接通过数组索引值改变数组的数据，Vue监测不到改变
- 实际在
js内存已经把数据的第一项数据修改了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div v-for="(attr,key) in person"> {{key}} -- {{attr}} </div> <div> <input type="text" v-model="searchInput" name="" id=""> <button @click="paixu(1)">升序</button> <button @click="paixu(2)">降序</button> <button @click="paixu(3)">原序列</button> <div v-for="(item,index) in searchList"> {{item.name}}--{{item.price}} </div> </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:'#app', data(){ return{ keyword:0, // 用来排序 searchInput:"", goodList:[ {name:'牛仔裤',price:200}, {name:'运动鞋',price:100}, {name:'跑步鞋',price:300}, {name:'篮球鞋',price:400}, ], person:{ name:'张三', sex:'男', } } }, methods:{ paixu(val){ this.keyword=val } }, computed:{ searchList(){ // 把goodList的内容过滤，把符合条件的形成一个新的数组 // filter是数字的过滤方法，这个方法的参数是一个函数，此函数返回true，则把此项返回新的数组中 let list = this.goodList.filter((item)=>{ return item.name.indexOf(this.searchInput)!==-1 }) if(this.keyword){ list.sort((a1,a2)=>{ return this.keyword === 1 ? a1.price - a2.price : a2.price - a1.price }) } return list } } }) </script> </html>
- 原因
- 因为在vue中数组并没有跟对象一样封装有监测数据变化的getter、setter
- 解决
- Vue在数组的原始操作方法上包裹了重新解析模板的方法，也就是说我们在data里面的数组操作方法不是原生的，是vue封装过的
- 哪些数组操作方法经过了封装？
push() 向数组的末尾添加一个或更多元素，并返回新的长度。 pop() 删除数组的最后一个元素并返回删除的元素 shift() 删除并返回数组的第一个元素 unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 splice() 从数组中添加或删除元素。 sort() 对数组的元素进行排序 reverse() 反转数组的元素顺序。
