时间:2021-07-01 10:21:17 帮助过:23人阅读
使用计算属性app.js
- var app5 = new Vue({
- el: '#app5',
- data: {
- shoppingList: [
- "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
- ],
- key: ""
- },
- computed: {
- filterShoppingList: function () {
- // `this` points to the vm instance
- var key = this.key;
- var shoppingList = this.shoppingList;
- return shoppingList.filter(function (item) {
- return item.toLowerCase().indexOf(key.toLowerCase()) != -1
- });;
- }
- }
- })
app.html
- <div id="app5">
- <h2>Vue-for</h2>
- <ul>
- <li v-for="item in shoppingList">
- {{ item }}
- </li>
- </ul>
- <h2>Vue-for filter实现</h2>
- <ul>
- Filter Key<input type="text" v-model="key">
- <li v-for="item in filterShoppingList">
- {{ item }}
- </li>
- </ul>
- </div>
最终效果实现了根据关键字来过滤列表的功能。
以上这篇Vue2.0 v-for filter列表过滤功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。