vue中列表过滤
<body> <div id="app"> <input type="text" v-model="searchInput"> <ul> <li v-for="(item,index) in searchList" :key="index"> {{item.name}}--{{item.price}} </li> </ul> </div> </body> <script src="./js/vue2.js"></script> <script> var app = new Vue({ el: '#app', data() { return { searchInput:'', goodsList:[ { name: '牛仔裤', price: '88元' }, { name: '运动裤', price: '67元' }, { name: '羽绒服', price: '128元' }, { name: '运动服', price: '100元' }, ] } }, computed:{ searchList(){ let list = this.goodsList.filter((item)=>{ return item.name.indexOf(this.searchInput)!==-1 }) return list; } } }); </script>
vue中列表排序
<body> <div id="app"> <input type="text" v-model="inputValue" /> <button @click="keyWord=1">升序</button> <button @click="keyWord=2">降序</button> <button @click="keyWord=0">原顺序</button> <ul> <li v-for="item in newList">{{item.name}}-{{item.price}}</li> </ul> </div> </body> <script src="./js/vue2.js"></script> <script> var app = new Vue({ el: '#app', data: { keyWord: 0, inputValue: '', list: [ { name: '牛仔裤', price: 88 }, { name: '运动裤', price: 67 }, { name: '羽绒服', price: 128 }, { name: '运动服', price: 100 }, ], }, computed: { newList() { const arr1 = this.list.filter((i) => { return i.name.indexOf(this.inputValue) !== -1; }); if (this.keyWord) { arr1.sort((a1, a2) => { return this.keyWord === 1 ? a1.price - a2.price : a2.price - a1.price; }); } return arr1; }, }, }); </script>
vue中数据更新的问题
对象新增数据更新问题
- 描述
- 通过普通对象添加属性方法，Vue不能监测到且不是响应式
this.obj.name= '张三'
解决
- Vue.set() / this.$set
this.$set(this.obj,'name','张三')
- 注意
- this.$set不能给vue实例的根数据对象添加属性
- 数组数据更新问题
- 描述
- 直接通过数组索引值改变数组的数据，Vue监测不到改变
- 实际在
js内存已经把数据的第一项数据修改了
this.list[0] = { name: '李四',age: 20 };
- 原因
- 因为在vue中数组并没有跟对象一样封装有监测数据变化的getter、setter
- 解决
- Vue在数组的原始操作方法上包裹了重新解析模板的方法，
也就是说我们在data里面的数组操作方法不是原生的，是vue封装过的 - 哪些数组操作方法经过了封装？
push() 向数组的末尾添加一个或更多元素，并返回新的长度。 pop() 删除数组的最后一个元素并返回删除的元素 shift() 删除并返回数组的第一个元素 unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 splice() 从数组中添加或删除元素。 sort() 对数组的元素进行排序 reverse() 反转数组的元素顺序。
