vue实现搜索功能
本文实例为大家分享了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。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条
-
利用vue + element实现表格分页和前端搜索的方法
前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理
-
Vue.js实现实例搜索应用功能详细代码
实例搜索应用 实现效果: 实现代码与注释: <!DOCTYPE html> <html> <head> <title>实例搜索</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=&q
-
vue组件实现可搜索下拉框扩展
本文实例为大家分享了vue组件实现可搜索下拉框的具体代码,供大家参考,具体内容如下 一.效果 二.代码 dropdown-ext.vue <template> <div class="vue-dropdown-ext" :class="themestyle" v-show-extend="show"> <div class="search-module clearfix" v-show="
-
Vue 仿百度搜索功能实现代码
无上下选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us
-
基于vue实现可搜索下拉框定制组件
实践加深对vue的理解和运用有效途径,本文是基于vue的可搜索下拉框定制组件实现,在此记录. 一.效果 二.组件代码 dropdown.vue <template> <div class="vue-dropdown default-theme" v-show-extend="show"> <div class="search-module clearfix" v-show="length">
-
基于Vue.js实现简单搜索框
在github上看到的练习,看个遍代码后自己再练一遍,先放原址:https://github.com/lavyun/vue-demo-search 主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果 这里有两个组件,一个组件是logo部分的,一个是搜索框部分的. html html很简单,就是引用两个组件. <div id="app"> <logo-pic
-
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-
-
Vue实现百度下拉提示搜索功能
一.前期准备 网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能 为了使用百度实现搜索功能,首先搞清楚下拉数据和搜索功能的数据接口 01.提示数据获取地址 打开百度官网打开开发者调试工具,选中network一项,然后我们在搜索框输入'a',将会network发送的请求,这个就是提示数据的数据获取地址 提示数据获取地址.png 然后简化一下: 复制代码 代码如下: https://sp0.baidu.com/5a1Faz
-
vue2.0多条件搜索组件使用详解
本文为大家分享了vue2.0多条件搜索组件的实现方法,供大家参考,具体内容如下 搜索条件为死数据,通过select下拉,选取多个条件:同时可点击加号增加搜索条件,点击减号减少搜索条件: templete <template> <div class="retrievalmian"> <div class="retrievaltitle"> <a class="btn-default tabbtn" @cli