Vue通过input筛选数据
2019/6/27 20:58:25
本文主要是介绍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通过input筛选数据的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略