vue2过滤器模糊查询方法

来源：动视网责编：小采时间：2020-11-27 22:07:39

vue2过滤器模糊查询方法

vue2过滤器模糊查询方法:如下所示： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> </head> <body> <div id=app> <inp

推荐度：

点击下载本文 文档为doc格式

导读vue2过滤器模糊查询方法:如下所示： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> </head> <body> <div id=app> <inp

如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<div id="app">
 <input type="text" v-model='search' />
 <ul v-for="item in searchData ">
 <li>{{item.name}},价格:￥{{item.price}}</li>
 </ul>
</div>
<script src="vue.js"></script>
<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: "汽车"
 }, {
 name: '火龙果',
 price: 25,
 category: "工具"
 }]
 },
 
 computed: {
 searchData: function() {
 var search = this.search;
	var searchVal = '';//搜索后的数据
 if (search) {
 searchVal = this.products.filter(function(product) {
 return Object.keys(product).some(function(key) {
	//搜索所有的内容
 return String(product[key]).toLowerCase().indexOf(search) > -1;
	//只搜索问题内容（某一个key）
	 return String(product['questions']).toLowerCase().indexOf(search)>-1;
 })
 })
	return searchVal;
 }
 }
 }
 
 })
</script>
</body>
</html>

以上这篇vue2过滤器模糊查询方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue2过滤器模糊查询方法

vue2过滤器模糊查询方法:如下所示： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> </head> <body> <div id=app> <inp

推荐度：

点击下载本文 文档为doc格式

标签：过滤方法 VUE

热门焦点

vue2过滤器模糊查询方法

vue2过滤器模糊查询方法

vue2过滤器模糊查询方法

最新推荐

猜你喜欢

热门推荐