vue中如何實現(xiàn)添加與刪除關鍵字搜索功能-創(chuàng)新互聯(lián)

小編給大家分享一下vue中如何實現(xiàn)添加與刪除關鍵字搜索功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)主要從事成都網站建設、網站建設、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務陽曲,十年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復雜的單頁應用。

具體代碼如下所示：

<!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 方法內部，通過 執(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>

vue中如何實現(xiàn)添加與刪除關鍵字搜索功能

以上是“vue中如何實現(xiàn)添加與刪除關鍵字搜索功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞名稱：vue中如何實現(xiàn)添加與刪除關鍵字搜索功能-創(chuàng)新互聯(lián)
URL網址：http://aaarwkj.com/article34/codgse.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站設計、App開發(fā)、動態(tài)網站、網站排名、搜索引擎優(yōu)化、微信公眾號

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

vue中如何實現(xiàn)添加與刪除關鍵字搜索功能-創(chuàng)新互聯(lián)

vue是什么