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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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控制网页过期时间的代码
2008/09/28 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
Javascript调用C#代码
2011/01/17 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
python实现flappy bird游戏
2018/12/24 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
小学教师的个人自我鉴定
2013/10/26 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
单位收入证明范本
2015/06/18 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Go获取两个时区的时间差
2022/04/20 Golang
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技