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

vue中的搜索關(guān)鍵字實(shí)例講解

 更新時間：2022年04月25日 10:17:15   作者：陽光少年～  
這篇文章主要介紹了vue中的搜索關(guān)鍵字實(shí)例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue的搜索關(guān)鍵字

1、定義一個搜索框

<label>
?? ?搜索關(guān)鍵字：
?? ?<input type="search" name="" id="" value="" v-model="keywords"/>
</label>

2、循環(huán)遍歷，之前

v-for 中的數(shù)據(jù)，都是直接從 data 上的list中直接渲染過來的，現(xiàn)在，我們自定義了一個 search 方法，同時，把所有的關(guān)鍵字，通過傳參的形式，傳遞給了 search 方法，在 search 方法內(nèi)部，通過 執(zhí)行 for 循環(huán)，把所有符合 搜索關(guān)鍵字的數(shù)據(jù)，保存到一個新數(shù)組中，返回

<tr v-for="item in search(keywords)" :key="item.id">
?? ?<td>{{ item.id }}</td>
?? ?<td v-text="item.name"></td>
?? ?<td>{{ item.ctime }}</td>
</tr>

3、在data中，我們寫入如下數(shù)據(jù)

data:{
?? ?id:'',
?? ?name:'',
?? ?keywords:'',
?? ?list:[
?? ??? ?{id:1,name:'李白',ctime:new Date()},
?? ??? ?{id:2,name:'關(guān)羽',ctime:new Date()},
?? ??? ?{id:3,name:'韓信',ctime:new Date()},
?? ??? ?{id:4,name:'花木蘭',ctime:new Date()},
?? ??? ?{id:5,name:'貂蟬',ctime:new Date()},
?? ??? ?{id:6,name:'露露',ctime:new Date()},
?? ??? ?{id:6,name:'大喬',ctime:new Date()},
?? ??? ?{id:6,name:'荊軻',ctime:new Date()},
?? ??? ?{id:6,name:'項(xiàng)羽',ctime:new Date()},
?? ??? ?{id:6,name:'典韋',ctime:new Date()},
?? ??? ?{id:7,name:'小喬',ctime:new Date()}
?? ?]
},

4、在methods中

我們根據(jù)關(guān)鍵字，進(jìn)行數(shù)據(jù)的搜索

methods:{
?? ??? ?search(keywords) {//根據(jù)關(guān)鍵字,進(jìn)行數(shù)據(jù)的搜索
?? ??? ??? ??? ?var newList = []
?? ??? ??? ??? ??? ?this.list.forEach(item => {
?? ??? ??? ??? ?if(item.name.indexOf(keywords) != -1){
?? ??? ??? ??? ??? ??? ??? ?newList.push(item)
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ??? ?return newList
?? ??? ??? ?}
?? ?}

5、我們還可以這樣寫

注意：forEach some filter findIndex 這些都屬于數(shù)組的新方法，都會對數(shù)組中的每一項(xiàng)，進(jìn)行遍歷，執(zhí)行相關(guān)的操作

注意：ES6 中，為字符串提供了一個新方法，叫做String.prototype.includes('要包含的字符串')，如果包含，則返回 true，否則返回 false

methods:{undefined

methods:{
?? ?search(keywords) {//根據(jù)關(guān)鍵字,進(jìn)行數(shù)據(jù)的搜索
?? ??? ??? ??? ?//注意: forEach?? ?some?? ?filter?? ?findIndex?? ?這些都屬于數(shù)組的新方法,
?? ??? ??? ??? ?//都會對數(shù)組中的每一項(xiàng),進(jìn)行遍歷,執(zhí)行相關(guān)的操作;
?? ??? ??? ??? ?return this.list.filter(item=>{
?? ??? ??? ??? ??? ?//if(item.name.indexOf(keywords) != -1)
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?//注意: ES6 中,為字符串提供了一個新方法,叫做 String.prototype.includes('要包含的字符串')
?? ??? ??? ??? ??? ?//如果包含,則返回 true ,否則返回 false
?? ??? ??? ??? ??? ?//contains ?
?? ??? ??? ??? ??? ?if(item.name.includes(keywords)){
?? ??? ??? ??? ??? ??? ?return item
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})?? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ?}

搜索功能及搜索結(jié)果關(guān)鍵字高亮

先看效果圖：

首先實(shí)現(xiàn)搜索功能

<div>
   <span>景點(diǎn)搜索：</span>
   <el-input prefix-icon="el-icon-search" placeholder="請輸入景點(diǎn)名稱或地區(qū)進(jìn)行搜索" v-model="filters.searchVal" clearable></el-input>
</div>

通過computed計算屬性監(jiān)聽搜索內(nèi)容的變化

computed: {
    list: function () {
         var _this = this;
         var arrByZM = []; // 定義一個新的空數(shù)組用來存儲匹配到的內(nèi)容
         for (var i = 0; i < _this.addressList.length; i++) {
             if (_this.addressList[i].name.search(_this.filters.searchVal) != -1 || _this.addressList[i].address.search(_this.filters.searchVal) != -1) {
                 arrByZM.push(_this.addressList[i]); // 將匹配到的內(nèi)容添加到arrByZM數(shù)組中
             }
         }
         return arrByZM;// 返回新的數(shù)組
    }
},

以上實(shí)現(xiàn)搜索功能

下邊實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示

使用v-html綁定方法名并傳遞兩個參數(shù)，第一個參數(shù)是：景點(diǎn)名稱；第二個參數(shù)是：搜索框內(nèi)輸入的搜索內(nèi)容

<div class="xph-list-r">
    <div>景點(diǎn)：<span v-html="brightenKeyword(item.name, filters.searchVal)" ></span></div>
    <div>位置：<span v-html="brightenKeyword(item.address, filters.searchVal)" ></span></div>
</div>

在methods中添加方法讓搜索到的關(guān)鍵字高亮顯示（以下提供兩種方法，本人使用的是第二種）

methods:{
   brightenKeyword(val, keyword) {
      // 方法1：篩選變色
      // val = val + '';
      // if (val.indexOf(keyword) !== -1 && keyword !== '') {
      //     return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
      // } else {
      //     return val
      // }
       // 方法2：用正則表達(dá)式
       const Reg = new RegExp(keyword, 'i');
       if (val) {
          const res = val.replace(Reg, `<span style="color: #3aa1ff;">${keyword}</span>`);
             // console.log(res); 
             return res;
       }
   },
},

至此完成搜索效果及搜索結(jié)果關(guān)鍵字高亮效果。

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論