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中添加与删除关键字搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对前端开发者网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

» 本文来自:前端开发者 » 《Vue中添加与删除关键字搜索功能_忘却_前端开发者》
» 本文链接地址:https://www.rokub.com/70709.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!