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

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

在Vue中，使用`v-for`遍历数据的处理方式可以分为两类：

1. 对`data`直接赋值（直接赋值，无需比较）： {{ item.n }}

2. 通过比较来赋值（比较赋值，但通常是直接赋值）： {{ item }}

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页面的显示。

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