Vue通过input筛选数据

更新时间：2020年10月26日 13:26:13 作者：薛伟杰

这篇文章主要为大家详细介绍了Vue通过input筛选数据的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue通过input筛选数据的具体代码，供大家参考，具体内容如下

<div id="app">
 <input v-model='search' />
 <ul>
 <li v-for="item in items">
  <label>价格</label><span v-html="item.name"></span>
  <label>￥</label><span v-html="item.price"></span>
 </ul>
</div>

new Vue({
 el: '#app',
 data: {
 search: '',
 products: [{
  name: '苹果',
  price: 25
 }, {
  name: '香蕉',
  price: 15
 }, {
  name: '雪梨',
  price: 65
 }, {
  name: '宝马',
  price: 2500
 }, {
  name: '奔驰',
  price: 10025
 }, {
  name: '柑橘',
  price: 15
 }, {
  name: '奥迪',
  price: 25
 }]
 },
 computed: {
 items: 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;
 }
 }
})

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue2.x 项目性能优化之代码优化的实现
这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
项目开发中husky的使用详解
这篇文章主要为大家介绍了项目开发中husky的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
Vue自定义属性实例分析
这篇文章主要介绍了Vue自定义属性,结合实例形式分析了vue.js自定义属性相关原理、实现方法及操作注意事项,需要的朋友可以参考下
2019-02-02
element-ui如何在table中使用tooltip
这篇文章主要介绍了element-ui如何在table中使用tooltip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
如何使用vite搭建vue3项目详解
Vite 是一个面向现代浏览器的更轻,更快的web应用开发工具,下面这篇文章主要给大家介绍了关于如何使用vite搭建vue3项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
Vue中对比scoped css和css module的区别
这篇文章主要介绍了Vue中scoped css和css module的区别对比，scoped css可以直接在能跑起来的vue项目中使用而css module需要增加css-loader配置才能生效。具体内容详情大家参考下本文
2018-05-05
Vue项目中ESlint规范示例代码
这篇文章主要给大家介绍了关于Vue项目中ESlint规范的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
vue配置请求本地json数据的方法
这篇文章主要介绍了vue配置请求本地json数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue中的计算属性实例详解
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。接下来通过本文给大家介绍vue中的计算属性,需要的朋友可以参考下
2018-09-09
vue中node_modules中第三方模块的修改使用详解
这篇文章主要介绍了vue中node_modules中第三方模块的修改使用,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05