vue中添加与删除关键字搜索功能


Posted in Javascript onOctober 12, 2019

具体代码如下所示:

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

Javascript 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
angular4自定义组件详解
Sep 28 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
JS数组splice操作实例分析
Oct 12 #Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 #Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 #Javascript
基于JS实现简单滑块拼图游戏
Oct 12 #Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 #Javascript
You might like
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
javascript解析json实例详解
2014/11/05 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
Python素数检测实例分析
2015/06/15 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python字符串与url编码的转换实例
2018/05/10 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python和Sublime整合过程图示
2019/12/25 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
电子商务网站的创业计划书
2014/01/05 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
个人党性分析材料
2014/12/19 职场文书
个人总结怎么写
2015/02/26 职场文书
导游词之潮音寺
2019/09/26 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis