Vue通过input筛选数据
程序员文章站
2022-06-24 08:50:17
本文实例为大家分享了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; } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 在Windows里使用Docker
下一篇: WinArchiver 2.7
推荐阅读
-
前端笔记-通过jQuery获取input数据及html中name的使用
-
vue.js通过自定义指令实现数据拉取更新的实现方法
-
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
-
vue input输入框关键字筛选检索列表数据展示
-
vue 列表页跳转详情页获取id以及详情页通过id获取数据
-
VUE-Table上绑定Input通过render实现双向绑定数据的示例
-
vue.js通过自定义指令实现数据拉取更新的实现方法
-
Vue2.X 通过AJAX动态更新数据
-
详解通过JSON数据使用VUE.JS
-
vue input输入框关键字筛选检索列表数据展示