脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置：首页→ 网络编程→ JavaScript→ javascript类库→ vue.js→ vue2过滤器模糊查询

vue2过滤器模糊查询方法

  更新时间：2018年09月16日 13:51:58  作者：seFei_Q 
今天小编就为大家分享一篇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>

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

相关文章

    • 在vue中使用echarts实现飞机航线水滴图词云图效果
      这篇文章主要介绍了在vue中使用echarts实现飞机航线 水滴图 词云图,通过引入中国地图JS文件，会自动注册地图，文中结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
      2022-08-08
    • 部属vue项目,访问路径设置非根,显示白屏的解决方案
      这篇文章主要介绍了部属vue项目,访问路径设置非根,显示白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
      2022-04-04
    • vue cli构建的项目中请求代理与项目打包问题
      这篇文章主要介绍了vue cli构建的项目中请求代理与项目打包问题,需要的朋友可以参考下
      2018-02-02
    • vuejs实现折叠面板展开收缩动画效果
      这篇文章主要介绍了vuejs实现折叠面板展开收缩动画效果,文中通过代码给大家分享两种情况介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
      2018-09-09
    • vue实现动态路由添加功能的简单方法(无废话版本)
      ue动态路由(约定路由),听起来好像很玄乎的样子,但是你要是理解了实现思路,你会发现没有想象中的那么难,下面这篇文章主要给大家介绍了关于vue实现动态路由添加功能的简单方法,需要的朋友可以参考下
      2023-02-02
    • Vue2.0利用vue-resource上传文件到七牛的实例代码
      本篇文章主要介绍了Vue2.0利用vue-resource上传文件到七牛的实例代码，具有一定的参考价值，有兴趣的可以了解一下
      2017-07-07
    • Vue.js之$emit用法案例详解
      这篇文章主要介绍了Vue.js之$emit用法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
      2021-09-09
    • 浅析Vue 生命周期
      这篇文章主要介绍了Vue 生命周期的过程，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
      2018-06-06
    • element step组件在另一侧加时间轴显示
      本文主要介绍了element step组件在另一侧加时间轴显示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
      2022-06-06
    • 简单谈谈Vue 模板各类数据绑定
      Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。
      2016-09-09

    最新评论