如何实现Vue中数据遍历、筛选、过滤及排序的复杂应用操作？

本文共计1338个文字，预计阅读时间需要6分钟。

Vue中处理v-for遍历数据的两种方式：

1. 对data直接赋值（比较简洁，但不如直接赋值灵活）： {{ item.n }}

vue 中对v-for 遍历数据的处理方式 可以分为两类 ：

一.对data 直接赋值（比较笨，但是比较直接）

<div id="app"> <ul> <li v-for="item in list">{{item.n}}</li> </ul> </div> </body>

<script> var app=new Vue({ el:'#app', data:{ list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}], } }) </script>

使用 app.list=[{n:44},{n:55},{n:66},{n:11},{n:22},{n:33}]直接赋值改变html页面的显示。

但是有时候这样会改动原数据，不太友善，很多时候我们只是想做个排序，数据筛选。