vue實現input輸入模糊查詢的三種方式

2022-08-14 14:00:39

1 計算屬性實現模糊查詢

vue 中通過計算屬性實現模糊查詢,建立 html 檔案，程式碼直接放入即可。

這裡自己匯入 vue，我是匯入本地已經下載好的。

<script src="./lib/vue-2.6.12.js"></script>

演示：

開啟預設顯示全部

輸入關鍵字模糊查詢，名字和年齡都可以

完整程式碼如下：

<!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">
      <h2>人員列表</h2>
      <input type="text" placeholder="請輸入名字" v-model="keyWord">
      <table>
        <thead>
          <tr>
            <td>名字</td>
            <td>年齡</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in fillist" :key="i">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="./lib/vue-2.6.12.js"></script>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          keyWord:'',
          list:[
            { name: '張三', age: '18' },
            { name: '張四', age: '17' },
            { name: '張五', age: '17' },
            { name: '老六', age: '18' },
            { name: '老八', age: '18' },
            { name: '小三', age: '19' },
            { name: 'Xingyue', age: '18' },
          ]
        },
        computed:{
          fillist(){
            // 返回過濾後的陣列
            return this.list.filter((p)=>{
              return p.name.indexOf(this.keyWord) !==-1 || p.age.indexOf(this.keyWord) !==-1
            })
          }
        }
      })
    </script>
  </body>
</html>

2 watch 監聽實現模糊查詢

vue 中通過watch 監聽實現模糊查詢

vue 中通過計算屬性實現模糊查詢,建立 html 檔案，程式碼直接放入即可。

完整程式碼如下：

<!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">
      <h2>人員列表</h2>
      <input type="text" placeholder="請輸入名字" v-model="keyWord">
      <table>
        <thead>
          <tr>
            <td>名字</td>
            <td>年齡</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in fillist" :key="i">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="./lib/vue-2.6.12.js"></script>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          keyWord:'',
          list:[
            { name: '張三', age: '18' },
            { name: '張四', age: '17' },
            { name: '張五', age: '17' },
            { name: '老六', age: '18' },
            { name: '老八', age: '18' },
            { name: '小三', age: '19' },
            { name: 'Xingyue', age: '18' },
          ],
          fillist:[]
        },
        watch:{
          keyWord:{
            immediate:true,//在框的值還沒變化時執行如下函數顯示出所有的情況
            handler(val){
              this.fillist = this.list.filter((p)=>{
                return p.name.indexOf(val) !==-1 || p.age.indexOf(val) !==-1
              })
            }
          }
        }
      })
    </script>
  </body>
</html>

演示和計算屬性的一樣。。

3 通過按鈕點選實現模糊查詢

這裡我是在 vue-cli 中完成的，完整程式碼如下。

vue.app 程式碼：

<template>
  <div id="app">
    <!-- 輸入框 -->
    <input type="text" v-model="value" placeholder="請輸入姓名/年齡" />
    <!-- 查詢按鈕 -->
    <button @click="search">查詢</button>
    <!-- 給table表格賦值 -->

    <table>
      <thead>
        <tr>
          <td>姓名</td>
          <td>年齡</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,i) in tableData" :key="i">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      tableData: [
        { name: '張三', age: '18' },
        { name: '張四', age: '17' },
        { name: '張五', age: '17' },
        { name: '老六', age: '18' },
        { name: '老八', age: '18' },
        { name: '小三', age: '19' },
        { name: 'Xingyue', age: '18' },
      ],
      //表格B用原表格的資料
      tableDataB: [
        { name: '張三', age: '18' },
        { name: '張四', age: '17' },
        { name: '張五', age: '17' },
        { name: '老六', age: '18' },
        { name: '老八', age: '18' },
        { name: '小三', age: '19' },
        { name: 'Xingyue', age: '18' },
      ],
    };
  },
  methods: {
    // 點選搜尋 支援模糊查詢
    search() {
      //表格用原表格的資料 即 用於搜尋的總資料
      this.tableData = this.tableDataB;
      //獲取到查詢的值，並使用toLowerCase():把字串轉換成小寫，讓模糊查詢更加清晰
      let _search = this.value.toLowerCase();
      let newListData = []; // 用於存放搜尋出來資料的新陣列
      if (_search) {
        //filter 過濾陣列
        this.tableData.filter((item) => {
          // newListData中 沒有查詢的內容，就新增到newListData中
          if (
            item.name.toLowerCase().indexOf(_search) !== -1 ||
            item.age.toLowerCase().indexOf(_search) !== -1
          ) {
            newListData.push(item);
          }
        });
      }
      //查詢後的表格 賦值過濾後的資料
      this.tableData = newListData;
    },
  },
}
</script>

<style></style>

main.js 程式碼如下：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

整體結構：

演示：

輸入關鍵字，點選查詢：

大小寫模糊查詢：

到此這篇關於vue實現input輸入模糊查詢的三種方式的文章就介紹到這了,更多相關vue input輸入模糊查詢內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

vue實現input輸入模糊查詢的三種方式

目錄

1 計算屬性實現模糊查詢

2 watch 監聽實現模糊查詢

3 通過按鈕點選實現模糊查詢

熱門文章