欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)input輸入模糊查詢的三種方式

 更新時(shí)間：2022年08月14日 11:03:21   作者：星月前端  
本文主要介紹了vue實(shí)現(xiàn)input輸入模糊查詢的三種方式嗎，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1 計(jì)算屬性實(shí)現(xiàn)模糊查詢

vue 中通過計(jì)算屬性實(shí)現(xiàn)模糊查詢,創(chuàng)建 html 文件，代碼直接放入即可。

這里自己導(dǎo)入 vue，我是導(dǎo)入本地已經(jīng)下載好的。

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

演示：

打開默認(rèn)顯示全部

輸入關(guān)鍵字模糊查詢，名字和年齡都可以

完整代碼如下：

<!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(){
            // 返回過濾后的數(shù)組
            return this.list.filter((p)=>{
              return p.name.indexOf(this.keyWord) !==-1 || p.age.indexOf(this.keyWord) !==-1
            })
          }
        }
      })
    </script>
  </body>
</html>

2 watch 監(jiān)聽實(shí)現(xiàn)模糊查詢

vue 中通過watch 監(jiān)聽實(shí)現(xiàn)模糊查詢

vue 中通過計(jì)算屬性實(shí)現(xiàn)模糊查詢,創(chuàng)建 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,//在框的值還沒變化時(shí)執(zhí)行如下函數(shù)顯示出所有的情況
            handler(val){
              this.fillist = this.list.filter((p)=>{
                return p.name.indexOf(val) !==-1 || p.age.indexOf(val) !==-1
              })
            }
          }
        }
      })
    </script>
  </body>
</html>
演示和計(jì)算屬性的一樣。。

3 通過按鈕點(diǎn)擊實(shí)現(xiàn)模糊查詢

這里我是在 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用原表格的數(shù)據(jù)
      tableDataB: [
        { name: '張三', age: '18' },
        { name: '張四', age: '17' },
        { name: '張五', age: '17' },
        { name: '老六', age: '18' },
        { name: '老八', age: '18' },
        { name: '小三', age: '19' },
        { name: 'Xingyue', age: '18' },
      ],
    };
  },
  methods: {
    // 點(diǎn)擊搜索 支持模糊查詢
    search() {
      //表格用原表格的數(shù)據(jù) 即 用于搜索的總數(shù)據(jù)
      this.tableData = this.tableDataB;
      //獲取到查詢的值，并使用toLowerCase():把字符串轉(zhuǎn)換成小寫，讓模糊查詢更加清晰
      let _search = this.value.toLowerCase();
      let newListData = []; // 用于存放搜索出來數(shù)據(jù)的新數(shù)組
      if (_search) {
        //filter 過濾數(shù)組
        this.tableData.filter((item) => {
          // newListData中 沒有查詢的內(nèi)容，就添加到newListData中
          if (
            item.name.toLowerCase().indexOf(_search) !== -1 ||
            item.age.toLowerCase().indexOf(_search) !== -1
          ) {
            newListData.push(item);
          }
        });
      }
      //查詢后的表格 賦值過濾后的數(shù)據(jù)
      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')

整體結(jié)構(gòu)：

演示：

輸入關(guān)鍵字，點(diǎn)擊查詢：

大小寫模糊查詢：

到此這篇關(guān)于vue實(shí)現(xiàn)input輸入模糊查詢的三種方式的文章就介紹到這了,更多相關(guān)vue input輸入模糊查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Vue調(diào)用后端java接口的實(shí)例代碼

    Vue調(diào)用后端java接口的實(shí)例代碼

    今天小編就為大家分享一篇Vue調(diào)用后端java接口的實(shí)例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的詳細(xì)實(shí)例

    Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的詳細(xì)實(shí)例

    在許多的后臺系統(tǒng)中少不了導(dǎo)出Excel表格的功能,下面這篇文章主要給大家介紹了關(guān)于Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • vue實(shí)現(xiàn)模態(tài)框的通用寫法推薦

    vue實(shí)現(xiàn)模態(tài)框的通用寫法推薦

    下面小編就為大家分享一篇vue實(shí)現(xiàn)模態(tài)框的通用寫法推薦，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • vue基于Echarts的拖拽數(shù)據(jù)可視化功能實(shí)現(xiàn)

    vue基于Echarts的拖拽數(shù)據(jù)可視化功能實(shí)現(xiàn)

    這篇文章主要給大家介紹了關(guān)于vue基于Echars的拖拽數(shù)據(jù)可視化功能實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • vue element后臺鑒權(quán)流程分析

    vue element后臺鑒權(quán)流程分析

    這篇文章主要介紹了vue element后臺鑒權(quán)流程分析,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-04-04
  • 拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果

    拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果

    本文主要介紹了拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • vue-cli項(xiàng)目修改文件熱重載失效的解決方法

    vue-cli項(xiàng)目修改文件熱重載失效的解決方法

    今天小編就為大家分享一篇vue-cli項(xiàng)目修改文件熱重載失效的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法

    VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法

    這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標(biāo)庫展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標(biāo)的時(shí)代，大概是15~16年左右我開始解除阿里Iconfont圖標(biāo)庫，剛開始就只會下載圖標(biāo)使用，需要的朋友可以參考下
    2021-10-10
  • VUE+Canvas實(shí)現(xiàn)財(cái)神爺接元寶小游戲

    VUE+Canvas實(shí)現(xiàn)財(cái)神爺接元寶小游戲

    這篇文章主要介紹了VUE+Canvas實(shí)現(xiàn)財(cái)神爺接元寶小游戲,需要的朋友可以參考下本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2021-04-04
  • 使用Vue實(shí)現(xiàn)簡易的車牌輸入鍵盤

    使用Vue實(shí)現(xiàn)簡易的車牌輸入鍵盤

    這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)簡易的車牌輸入鍵盤效果,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下
    2023-11-11

最新評論