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 相关文章推荐
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
Vue运用transition实现过渡动画
May 06 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
PHP 一个页面执行时间类代码
2010/03/05 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
python类和继承用法实例
2015/07/07 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
初中生评语大全
2014/04/24 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
公司会议开幕词
2016/03/03 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
Python创建SQL数据库流程逐步讲解
2022/09/23 Python