vue过滤排序

最新推荐文章于 2024-05-22 15:46:56 发布

黑色咖啡 Ken

最新推荐文章于 2024-05-22 15:46:56 发布

阅读量352

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/a4561614/article/details/81081379

版权

Vue 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

<!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>