快捷導(dǎo)航

vue中添加與刪除關(guān)鍵字搜索功能

更新時(shí)間：2019年10月12日 13:16:37 作者：YH丶浩

這篇文章主要介紹了vue中添加與刪除，關(guān)鍵字搜索功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

具體代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <div>
   <label>Id:
    <input type="text" v-model='id'>
   </label>
   <label for="">Name:
    <input type="text" v-model='name' @keyup.enter='add'>
   </label>
   <input type="button" value="添加" @click='addBtnFlag && add()'>
   搜索：
   <input type="text" v-model='keywords' id="search" v-focus v-color>
  </div>
  <!-- 注意： v-for 循環(huán)的時(shí)候 ， key 屬性只能使用 number獲取string -->
  <!-- 注意：key 在使用的時(shí)候，必須使 v-bind 屬性綁定的形式 指定 key 的值 -->
  <!--在組件中，使用v-for循環(huán)的時(shí)候，或者在一些特殊的情況中，如果 v-for 有問題 ，必須 在使用 v-for 的同時(shí) ，指定 唯一的字符串/數(shù)字 類型 :key 值 -->
  <!-- v-for 中的數(shù)據(jù)，都是直接從 data 上的 list 中直接渲染過來的 -->
  <!-- 自定義一個(gè) search 方法，同時(shí) ，把所有的關(guān)鍵詞，通過傳參的形式，傳遞給了 search 方法 -->
  <!-- 在 search 方法內(nèi)部，通過 執(zhí)行 for 循環(huán)，把所有符合 搜索關(guān)鍵字的數(shù)據(jù)，保存到 一個(gè)新數(shù)組中 返回 -->
  <p v-for='item in search(keywords)' :key="item.id">
   <input type="checkbox">
   {{item.id}}---- {{item.name}}
   <!-- <a @click='shift(index)'>刪除</a> -->
   -----------------<a @click.prevent="del(item.id)">刪除</a>
  </p>
 </div>
 <script>
  //使用 Vue.directive() 定義全局的指令 v-focus
  //其中：參數(shù)1：指令的名稱，注意，在定義的時(shí)候，指令的名稱前面，不需要加 v- 前綴，
  //但是：再調(diào)用的時(shí)候，必須 在指令名稱前面 加上 v- 前綴來進(jìn)行調(diào)用
  //參數(shù)2：是一個(gè)對(duì)象，這個(gè)對(duì)象身上，有一些指令相關(guān)的函數(shù)可以在特定的階段，執(zhí)行相關(guān)的操作
  Vue.directive('focus', {
   bind: function (el) {
    //每當(dāng)指令綁定到元素上的時(shí)候，會(huì)立即執(zhí)行這個(gè) bind 函數(shù)，只執(zhí)行一次
    //注意：在每個(gè) 函數(shù)中，第一個(gè)參數(shù)，永遠(yuǎn)是 el ， 表示 被綁定了指令的那個(gè)元素，這個(gè) el 參數(shù)，是一個(gè)原生的的JS對(duì)象
    //在元素 剛綁定了指令的時(shí)候，還沒有 插入到 DOM 中去，這時(shí)候，調(diào)用focus 方法沒有作用
    //因?yàn)?，一個(gè)元素，只有插入DOM之后，才能獲取焦點(diǎn)
    el.focus()
   },
   inserted: function (el) {
    //inserted 表示元素 插入到DOM中的時(shí)候，會(huì)執(zhí)行 inserted 函數(shù)【觸發(fā)一次】
    el.focus()
   },
   updated: function (el) {
    //當(dāng)VNode更新的時(shí)候 會(huì)執(zhí)行updated 可能會(huì)觸發(fā)多次
   },
  })
  Vue.directive('color',{
   bind: function (el) {
    el.style.color = 'red'
   }
  })
  var vm = new Vue({
   el: "#app",
   data: {
    id: '',
    name: '',
    keywords: '',//關(guān)鍵詞
    addBtnFlag:true,
    list: [
     { id: 1, name: '奧迪' },
     { id: 2, name: '寶馬' },
     { id: 3, name: '奔馳' },
     { id: 4, name: '瑪莎拉蒂' },
     { id: 5, name: '保時(shí)捷' },
     { id: 6, name: '五菱宏光' }
    ]
   },
   methods: {
    add() {
     // this.list.push({ id: this.id, name: this.name })
     if( this.id == ''){
      this.addBtnFlag=false
     }else{
      var car = { id: this.id, name: this.name }
      this.list.push(car)
      this.id = this.name = ''
     }
    },
    del(id) {
     //根據(jù)ID刪除
     // this.list.some((item,i)=>{
     //  if(item.id == id){
     //   this.list.splice(i,1)
     //   return true;
     //  }
     // })
     var index = this.list.findIndex(item => {
      if (item.id == id) {
       return true;
      }
     })
     this.list.splice(index, 1)
    },
    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
     //注意：forEach some filter findIndex 這些都是屬于數(shù)組的新方法，
     //都會(huì)對(duì)數(shù)組中的每一項(xiàng)，進(jìn)行遍歷，執(zhí)行相關(guān)的操作；
     return this.list.filter(item => {
      //if(item.name.indexOf(keywords) != -1)
      //注意：ES6中，為字符串提供了一個(gè)新的方法，叫做 string.prototype.includes('要包含的字符串')
      //如果包含，則返回 true 否則返回false
      //contain
      if (item.name.includes(keywords)) {
       return true
      }
     })
     // return newList
    }
   }
  })
 </script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的vue中添加與刪除關(guān)鍵字搜索功能,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: