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 相关文章推荐
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
jquery.cookie用法详细解析
2013/12/18 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
Python如何用filter函数筛选数据
2020/03/05 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
车间操作工岗位职责
2013/12/19 职场文书
给医务人员表扬信
2014/01/12 职场文书
个人作风剖析材料
2014/02/02 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
公司合作协议范文
2014/10/01 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
留学推荐信中文范文
2015/03/26 职场文书
公司开业致辞
2015/07/29 职场文书
初一数学教学反思
2016/02/17 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
JavaScript 定时器详情
2021/11/11 Javascript