vue中添加與刪除關鍵字搜索功能

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

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

具體代碼如下所示：

<!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)的時候 ， key 屬性只能使用 number獲取string -->
  <!-- 注意：key 在使用的時候，必須使 v-bind 屬性綁定的形式 指定 key 的值 -->
  <!--在組件中，使用v-for循環(huán)的時候，或者在一些特殊的情況中，如果 v-for 有問題 ，必須 在使用 v-for 的同時 ，指定 唯一的字符串/數(shù)字 類型 :key 值 -->
  <!-- v-for 中的數(shù)據(jù)，都是直接從 data 上的 list 中直接渲染過來的 -->
  <!-- 自定義一個 search 方法，同時 ，把所有的關鍵詞，通過傳參的形式，傳遞給了 search 方法 -->
  <!-- 在 search 方法內(nèi)部，通過 執(zhí)行 for 循環(huán)，把所有符合 搜索關鍵字的數(shù)據(jù)，保存到 一個新數(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：指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴，
  //但是：再調用的時候，必須 在指令名稱前面 加上 v- 前綴來進行調用
  //參數(shù)2：是一個對象，這個對象身上，有一些指令相關的函數(shù)可以在特定的階段，執(zhí)行相關的操作
  Vue.directive('focus', {
   bind: function (el) {
    //每當指令綁定到元素上的時候，會立即執(zhí)行這個 bind 函數(shù)，只執(zhí)行一次
    //注意：在每個 函數(shù)中，第一個參數(shù)，永遠是 el ， 表示 被綁定了指令的那個元素，這個 el 參數(shù)，是一個原生的的JS對象
    //在元素 剛綁定了指令的時候，還沒有 插入到 DOM 中去，這時候，調用focus 方法沒有作用
    //因為，一個元素，只有插入DOM之后，才能獲取焦點
    el.focus()
   },
   inserted: function (el) {
    //inserted 表示元素 插入到DOM中的時候，會執(zhí)行 inserted 函數(shù)【觸發(fā)一次】
    el.focus()
   },
   updated: function (el) {
    //當VNode更新的時候 會執(zhí)行updated 可能會觸發(fā)多次
   },
  })
  Vue.directive('color',{
   bind: function (el) {
    el.style.color = 'red'
   }
  })
  var vm = new Vue({
   el: "#app",
   data: {
    id: '',
    name: '',
    keywords: '',//關鍵詞
    addBtnFlag:true,
    list: [
     { id: 1, name: '奧迪' },
     { id: 2, name: '寶馬' },
     { id: 3, name: '奔馳' },
     { id: 4, name: '瑪莎拉蒂' },
     { id: 5, name: '保時捷' },
     { 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ù)關鍵字，進行數(shù)據(jù)的搜索
     // var newList = []
     // this.list.forEach(item =>{
     //  if(item.name.indexOf(keywords) != -1){
     //   newList.push(item)
     //  }
     // }) 
     // return newList
     //注意：forEach some filter findIndex 這些都是屬于數(shù)組的新方法，
     //都會對數(shù)組中的每一項，進行遍歷，執(zhí)行相關的操作；
     return this.list.filter(item => {
      //if(item.name.indexOf(keywords) != -1)
      //注意：ES6中，為字符串提供了一個新的方法，叫做 string.prototype.includes('要包含的字符串')
      //如果包含，則返回 true 否則返回false
      //contain
      if (item.name.includes(keywords)) {
       return true
      }
     })
     // return newList
    }
   }
  })
 </script>
</body>
</html>