本文主要包含vue 获取input值,vue使input可输入,vue.js input,vue input,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>
</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;
}
}
})
</div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。