当前位置:Gxlcms > JavaScript > Vue2.0 v-for filter列表过滤功能的实现

Vue2.0 v-for filter列表过滤功能的实现

时间:2021-07-01 10:21:17 帮助过:23人阅读

使用计算属性app.js

  1. var app5 = new Vue({
  2. el: '#app5',
  3. data: {
  4. shoppingList: [
  5. "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
  6. ],
  7. key: ""
  8. },
  9. computed: {
  10. filterShoppingList: function () {
  11. // `this` points to the vm instance
  12. var key = this.key;
  13. var shoppingList = this.shoppingList;
  14. return shoppingList.filter(function (item) {
  15. return item.toLowerCase().indexOf(key.toLowerCase()) != -1
  16. });;
  17. }
  18. }
  19. })

app.html

  1. <div id="app5">
  2. <h2>Vue-for</h2>
  3. <ul>
  4. <li v-for="item in shoppingList">
  5. {{ item }}
  6. </li>
  7. </ul>
  8. <h2>Vue-for filter实现</h2>
  9. <ul>
  10. Filter Key<input type="text" v-model="key">
  11. <li v-for="item in filterShoppingList">
  12. {{ item }}
  13. </li>
  14. </ul>
  15. </div>

最终效果实现了根据关键字来过滤列表的功能。

以上这篇Vue2.0 v-for filter列表过滤功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

人气教程排行