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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
Vue实现图书管理案例
Jan 20 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的伪随机数与真随机数详解
2015/05/27 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
深入理解python中的atexit模块
2017/03/07 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
深入浅析Python的类
2018/06/22 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
集体婚礼证婚词
2014/01/13 职场文书
探矿工程师自荐信
2014/01/24 职场文书
暑期研修感言
2014/02/17 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
四则混合运算教学反思
2016/02/23 职场文书
导游词之西安骊山
2019/12/03 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
Django框架中表单的用法
2022/06/10 Python