vue实现搜索功能


Posted in Javascript onMay 28, 2019

本文实例为大家分享了vue实现搜索功能的具体代码,供大家参考,具体内容如下

methods (要有一定的触发条件才能执行,如点击事件)

<template>
 <div class="safetyInfo">
 <input type="text" name="" id="" placeholder="搜索" v-model="search"/> 
 <button @click="btn">搜索</button>
 <ul v-for="list in searchData">
 <li>
  <span>{{list.name}}</span>
  <span>{{list.date}}</span>
  <span>{{list.depart}}</span>
 </li>
 </ul>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
  search:'',
  searchData: '',
 products:[
  //假数据
  {name:"数据1",date:'2018-01-04',depart:'泸化工1'},
  {name:"数据2",date:'2018-01-25',depart:'泸化工2'},
  {name:"数据3",date:'2018-02-10',depart:'泸化工3'},
  {name:"数据4",date:'2018-03-04',depart:'泸化工4'},
  {name:"数据5",date:'2018-05-24',depart:'泸化工5'},
  {name:"数据6",date:'2018-10-29',depart:'泸化工6'}
  ]
 }
 },
 methods:{
 btn:function(){
 
 var search = this.search;
 if (search) {
 this.searchData = this.products.filter(function(product) {
  console.log(product)
 return Object.keys(product).some(function(key) {
  console.log(key)
  return String(product[key]).toLowerCase().indexOf(search) > -1
 })
 })
 }
 
 }
 }
}
</script>

computed (在HTML DOM加载后马上执行的,如赋值):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 
<div id="app">
<input v-model='search' />
<ul v-for="item in searchData ">
<li>{{item.name}},价格:¥{{item.price}}</li>
</ul>
</div>
 
 
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
products: [{
name: '苹果',
price: 25,
category: "水果"
}, {
name: '香蕉',
price: 15,
category: "水果"
}, {
name: '雪梨',
price: 65,
category: "水果"
}, {
name: '宝马',
price: 2500,
category: "汽车"
}, {
name: '奔驰',
price: 10025,
category: "汽车"
}, {
name: '柑橘',
price: 15,
category: "水果"
}, {
name: '奥迪',
price: 25,
category: "汽车"
}]
},
computed: {
searchData: function() {
var search = this.search;
 
if (search) {
return this.products.filter(function(product) {
return Object.keys(product).some(function(key) {
return String(product[key]).toLowerCase().indexOf(search) > -1
})
})
}
 
return this.products;
}
}
})
</script>
 
 
</body>
</html>

注:some()为数组中的每个元素执行一次callback函数,直到它找到一个返回值为可以转化为布尔值true的值,此时some()方法将立刻返回true,否则立刻返回false 

by the way:

watch 它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。

所以他们的执行顺序为:默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再watch。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
详解React 元素渲染
Jul 07 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 #Javascript
如何实现双向绑定mvvm的原理实现
May 28 #Javascript
vue实现带复选框的树形菜单
May 27 #Javascript
vue实现按需加载组件及异步组件功能
May 27 #Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 #Javascript
原生js实现each方法实例代码详解
May 27 #Javascript
深入学习JavaScript中的bom
May 27 #Javascript
You might like
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php获取系统变量方法小结
2015/05/29 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
jqTransform美化表单
2015/10/10 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python分析学校四六级过关情况
2017/11/22 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python识别html主要文本框过程解析
2020/02/18 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
如何提高MySql的安全性
2014/06/19 面试题
小学教师师德演讲稿
2014/05/06 职场文书
如何写求职信
2014/05/24 职场文书
安全横幅标语
2014/06/09 职场文书
借款协议书
2014/09/16 职场文书
留学推荐信怎么写
2015/03/26 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书