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 相关文章推荐
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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
php 操作调试的方法
2012/07/12 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
网页自动跳转代码收集
2009/09/27 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python自动化操作实现图例绘制
2020/07/09 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
入党介绍人意见范文
2015/06/01 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
python区块链实现简版工作量证明
2022/05/25 Python