Vue：模糊查詢功能和排序

阿新 • • 發佈：2021-11-09

實現模糊查詢

需要回顧computed：要求得到一個新的陣列，使用計算屬性處理當值變化computed重新執行

Computed實現模糊查詢

<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 開發環境版本，包含了有幫助的命令列警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
   <h1>模糊查詢</h1>
  查詢：<input type="text" v-model="keyworld">
  <ul>
    <!--這裡呼叫computed的屬性初始會呼叫一次返回data陣列的過濾陣列-->
    <li v-for="(p,index) in changeperson" :key="p.id">
      {{p.name}}-{{p.age}}-{{index}}

    </li>
  </ul>

</div>
</body>
<script type="text/javascript">
  //關閉生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
      keyworld:'',
      person:[
        {id:1,name:"張岱",age:18},
        {id:2,name:"張子",age:18},
        {id:3,name:"張而",age:18}
      ]
    },
    computed:{
      changeperson(){
        //返回一個過濾陣列
         return this.person.filter(p=>{
           //過濾的條件是：模糊查詢/因為每次關聯的值keyworld變化時候就會重新呼叫computed
            return p.name.indexOf(this.keyworld)!=-1;
        })
      }
    }
  })
  console.log(v)
</script >
</html>

實現排序

在原來的返回值上進行排序處理

<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 開發環境版本，包含了有幫助的命令列警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
   <h1>升序降序</h1>
  <button @click="sortkey = 1">升</button>
  <button @click="sortkey = 2">降</button>
  <button @click="sortkey = 0">原來</button>
  <ul>
    <!--這裡呼叫computed的屬性初始會呼叫一次返回data陣列的過濾陣列-->
    <li v-for="(p,index) in changeperson" :key="p.id">
      {{p.name}}-{{p.age}}-{{index}}

    </li>
  </ul>

</div>
</body>
<script type="text/javascript">
  //關閉生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
      keyworld:'',
      sortkey:0,
      person:[
        {id:1,name:"張岱",age:18},
        {id:2,name:"張子",age:14},
        {id:3,name:"張而",age:22}
      ]
    },
    computed:{
      changeperson(){
        //返回一個過濾陣列
         const arr = this.person.filter(p=>{
           //過濾的條件是：模糊查詢/因為每次關聯的值keyworld變化時候就會重新呼叫computed
            return p.name.indexOf(this.keyworld)!=-1;
        })
        //判斷得到的陣列是不是需要排序
        if(this.sortkey!=0){
           arr.sort((a, b)=>{
             return this.sortkey === 1 ? a.age-b.age:b.age-a.age
           })
        }
        //最後記得返回陣列
        return arr
      }
    }
  })
  console.log(v)
</script >
</html>