zoukankan      html  css  js  c++  java
  • Vue中使用v-for和filter来过滤数据

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>Vue-Computed计算属性</title>
     6         <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
     7         <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.0/index.js"></script>
     8         <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.0/theme-chalk/index.css" rel="stylesheet">
     9     </head>
    10     <body>
    11         <div id="app">
    12             <!-- v-for中的可以使用计算属性来过滤数据 -->
    13             <ul>
    14                 <li v-for="n in evenNumbers">{{ n }}</li>
    15             </ul>
    16             
    17             <!-- 双层v-for不可以用计算属性,但是可以用一个方法来过滤 -->
    18             <ul v-for="set in sets">
    19               <li v-for="n in even(set)">{{ n }}</li>
    20             </ul>
    21         </div>
    22         <script>
    23             var vm = new Vue({
    24                 el: '#app',
    25                 data: {
    26                     numbers: [ 1, 2, 3, 4, 5 ],
    27                     sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
    28                 },
    29                 computed:{
    30                     evenNumbers(){
    31                         return this.numbers.filter((number) => {
    32                           return number % 2 === 0
    33                         })
    34                       }
    35                 },
    36                 methods:{
    37                     even(arr_num){
    38                         return arr_num.filter(function (number) {
    39                             return number % 2 === 0
    40                         })
    41                     }
    42                 }
    43             })
    44         </script>
    45     </body>
    46 </html>
  • 相关阅读:
    如何设置某些动作在凌晨12点时自动更新
    箭头式导航
    解决遮罩层下面的内容仍可滑动问题
    时间戳转换时间
    折扣显示
    纯css自定义checkbox和radio的样式
    布局补充
    文字水平垂直居中
    Spring_自动组件扫描和 基于注解配置bean
    Spring_JDBC连接
  • 原文地址:https://www.cnblogs.com/lyt520/p/13706948.html
Copyright © 2011-2022 走看看