网络编程
位置：首页>> 网络编程>> JavaScript>> vue2过滤器模糊查询方法

vue2过滤器模糊查询方法

作者：seFei_Q　　发布时间：2024-04-28 09:21:03　

标签：vue2,过滤器,查询

如下所示：


<!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>

来源：https://blog.csdn.net/seFei_Q/article/details/78788102

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com