列表過濾
-
<body><div id="root"><!--輸入框用于模糊查詢--><input type="text" placeholder="請你輸入名字" v-model="name"><ul><!--in可以換成of--><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div> </body> <script>const vm = new Vue({el:'#root',data: {name: '',persons:[{id:'001',name:'馬冬梅',age:'21',sex:'男'},{id:'002',name:'周冬雨',age:'20',sex:'男'},{id:'003',name:'蔡徐坤',age:'25',sex:'女'},{id:'004',name:'周杰倫',age:'24',sex:'女'},],},//只是監聽的作用。先用簡寫看能不能解決問題watch: {//參數有兩個，一個為變化前的參數，一個為變化后的參數。這里只要變化后的參數name(val){//filter為過濾的作用,讓其過濾出來.但過濾出來的是新數組沒有改變原來的值。故用persons接收this.persons = ?this.persons.filter((p)=>{//p.name.indexOf(val)意思是讓p.name中查詢有沒有與val值(也就是name屬性)一樣的，進行返回除-1以外的索引return p.name.indexOf(val) !== -1})}}}) </script> -
運行一下,因為過濾的緣故，越是搜索數據越少。預期不符.
解決方案:
1、加入空的數組 flashPersons，作用是保留persons數組的數據
2、用完整的watch加入 immediate: true進行嘗試
3、用index方法將flashPersons顯示出來數據，
-
<body><div id="root"><!--輸入框用于模糊查詢--><input type="text" placeholder="請你輸入名字" v-model="name"><ul><!--保留原來的數組--><li v-for="(p,index) in flashPersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div> </body> <script>const vm = new Vue({el:'#root',data: {name: '',persons:[{id:'001',name:'馬冬梅',age:'21',sex:'男'},{id:'002',name:'周冬雨',age:'20',sex:'男'},{id:'003',name:'蔡徐坤',age:'25',sex:'女'},{id:'004',name:'周杰倫',age:'24',sex:'女'},],flashPersons: [],},//因為要使用immediate:true，故不能縮寫watch: {name: {//加入immediate:true，當用戶什么都沒有輸入時，p為空值。直接調用handler方法，p.name.indexOf(val)中p數組中每個對象的name空值為0，故符合查詢條件，都顯示出來。immediate: true,handler(val){this.flashpersons ?= this.persons.filter((p)=>{return p.name.indexOf(val) !== -1})}}}}}) </script>由于watch的復雜性，用computed計算屬性更好
-
為什么計算屬性更好，可以這么想。
-
1、computed是由data中的數據是計算得來的，無需像watch監聽數據的改變才變化。
-
2、computed計算出來的屬性，不會修改原來的屬性。無需在創建空數組
-
<body><div id="root"><!--輸入框用于模糊查詢--><input type="text" placeholder="請你輸入名字" v-model="name"><ul><!--保留原來的數組--><li v-for="(p,index) in flashPersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div> </body> <script>const vm = new Vue({el:'#root',data: {name: '',persons:[{id:'001',name:'馬冬梅',age:'21',sex:'男'},{id:'002',name:'周冬雨',age:'20',sex:'男'},{id:'003',name:'蔡徐坤',age:'25',sex:'女'},{id:'004',name:'周杰倫',age:'24',sex:'女'},],},computed: {//計算屬性沒有用到修改set，直接用簡寫形式。fashPersons(){//filter方法返回的是新數組。計算屬性的值由return返回return this.persons.filter((p)=>{return p.name.indexOf(this.name) !== -1})}}}) </script> -
當注釋后的代碼，無法折疊時。可以用#region和#endregion
列表排序
-
思路分析
當點擊升序，sortType的值變為2,之后執行v-for語句中flashPersons在查詢的基礎上。添加一個排序的方法。
點擊原數組按鈕，sortType的值變為0。回到只有查詢的功能。也就是列表過濾的內容
-
<body><div id="root"><input type="text" placeholder="請你輸入名字" v-model="name"><button @click="sortType = 2">升序</button><button @click="sortType = 1">降序</button><button @click="sortType = 0">原數組</button><ul><!--保留原來的數組--><li v-for="(p,index) in flashPersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div> </body> <script>const vm = new Vue({el:'#root',data: {name: '',sortType: 0,persons:[{id:'001',name:'馬冬梅',age:'21',sex:'男'},{id:'002',name:'周冬雨',age:'20',sex:'男'},{id:'003',name:'蔡徐坤',age:'25',sex:'女'},{id:'004',name:'周杰倫',age:'24',sex:'女'},],},computed: {flashPersons () {//實現查詢之后，這里將第一個return 改成 const num ，因為不著急進行返回數據。實現的功能是查詢和排序一同實現const num = this.persons.filter((p) => {//這個return 將數據返回給numreturn p.name.indexOf(this.name) !== -1})//this.sorType為true,也就是等于1或2if (this.sortType) {//利用sort()方法實現升序和降序的功能，p1 - p2 為升序，p2 - p1為降序num.sort((p1, p2) => {return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age})}//這個return 將數據返回給flashPersonsreturn num}}}) </script>
-
-
解決方案)
