vue过滤排序

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>过滤/排序</title>
</head>

<body>
  <div class="app">
    <!---使用过滤计算属性-->
      <ul>
       <li v-for="item in itemArrFun">{{item}}</li>
     </ul>
       <!---使用v-if来判断过滤-->
       <ul>
        <li v-for="item in itemArr" v-if="item%2===0">{{item}}</li>
      </ul>
      <!--使用 method 方法:-->
      <ul>
       <li v-for="item in fun(itemArr)">{{item}}</li>
     </ul>
  </div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">

var vm=new Vue({
  el:'.app',
  data:{
     itemArr:[1,2,3,4,5,6]
  },
  computed:{//计算属性
      itemArrFun:function(){
       return  this.itemArr.filter(function(number){
          return number % 2===0;
        });
      }
  },
  methods:{//使用方法过滤
    fun:function(itemArr){
      return  this.itemArr.filter(function(number){
         return number % 2===0;
       });
    }
  }
});
</script>

</html>

猜你喜欢

转载自blog.csdn.net/a4561614/article/details/81081379