小編給大家分享一下vue中如何實現添加與刪除關鍵字搜索功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和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 循環的時候 ， key 屬性只能使用 number獲取string --> <!-- 注意：key 在使用的時候，必須使 v-bind 屬性綁定的形式 指定 key 的值 --> <!--在組件中，使用v-for循環的時候，或者在一些特殊的情況中，如果 v-for 有問題 ，必須 在使用 v-for 的同時 ，指定 唯一的字符串/數字 類型 :key 值 --> <!-- v-for 中的數據，都是直接從 data 上的 list 中直接渲染過來的 --> <!-- 自定義一個 search 方法，同時 ，把所有的關鍵詞，通過傳參的形式，傳遞給了 search 方法 --> <!-- 在 search 方法內部，通過 執行 for 循環，把所有符合 搜索關鍵字的數據，保存到 一個新數組中 返回 --> <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 //其中：參數1：指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴， //但是：再調用的時候，必須 在指令名稱前面 加上 v- 前綴來進行調用 //參數2：是一個對象，這個對象身上，有一些指令相關的函數可以在特定的階段，執行相關的操作 Vue.directive('focus', { bind: function (el) { //每當指令綁定到元素上的時候，會立即執行這個 bind 函數，只執行一次 //注意：在每個 函數中，第一個參數，永遠是 el ， 表示 被綁定了指令的那個元素，這個 el 參數，是一個原生的的JS對象 //在元素 剛綁定了指令的時候，還沒有 插入到 DOM 中去，這時候，調用focus 方法沒有作用 //因為，一個元素，只有插入DOM之后，才能獲取焦點 el.focus() }, inserted: function (el) { //inserted 表示元素 插入到DOM中的時候，會執行 inserted 函數【觸發一次】 el.focus() }, updated: function (el) { //當VNode更新的時候 會執行updated 可能會觸發多次 }, }) 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) { //根據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) { //根據關鍵字，進行數據的搜索 // var newList = [] // this.list.forEach(item =>{ // if(item.name.indexOf(keywords) != -1){ // newList.push(item) // } // }) // return newList //注意：forEach some filter findIndex 這些都是屬于數組的新方法， //都會對數組中的每一項，進行遍歷，執行相關的操作； 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中如何實現添加與刪除關鍵字搜索功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
