当v-if与v-for一起使用时，改为通过计算属性先过滤列表

当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。这意味着v-if将分别作用于每个v-for循环迭代中的元素。然而，Vue官方推荐尽量避免同时使用v-if和v-for。如果需要这样做，考虑通过计算属性先过滤列表。

假设你有一个任务列表，但只想显示未完成的任务：

<ul>
  <li v-for="task in tasks" v-if="!task.isCompleted">{{ task.description }}</li>
</ul>

在上面的代码中，每个任务都会被v-for遍历，但只有当task.isCompleted为false时（即任务未完成时），对应的任务描述才会被渲染。

更好的做法是使用计算属性:

computed: {
  unfinishedTasks() {
    return this.tasks.filter(task => !task.isCompleted);
  }
}

然后在模板中使用这个计算属性：

<ul>
  <li v-for="task in unfinishedTasks">{{ task.description }}</li>
</ul>

这种方法更清晰，并且性能更好，因为它避免了在每次渲染中对列表的重复评估和过滤，而是只在任务列表发生变化时才重新计算过滤后的列表。

方案一：
computed: {
    //先对books的数据进行过滤计算
    filterBooks(){
        let newBooks = []
        for (i = 0; i < this.books.length; i++) {
            if (this.books[i].price > 500) {
                newBooks.push(this.books[i])
            }
        }
        console.log(newBooks)
        return newBooks
    }
}
方案二：vue3推荐使用filter
computed: {
    //先对books的数据进行过滤计算
    filterBooks2(){
        return this.books.filter(function (item) {
            // 便利所有的books，赋值给数组
            console.log("item", item)
            return item.price > 500
        })
    }
}

在给出的代码段中，filterBooks2 方法通过 filter 函数过滤 books 数组，返回所有 price 大于 500 的书籍。filter 函数是 JavaScript 中的数组方法之一，它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。条件检查是在回调函数中完成的，每个数组元素都会执行一次回调函数。

filter 方法的回调函数：this.books.filter(function (item){…}) 中的 function(item) 是 filter 方法的回调函数，item 表示数组中的当前遍历到的元素。在这个场景下，item 代表 books 数组中的一个书籍对象。
判断条件 item.price>500：这是 filter 方法的核心判断逻辑，用来检查当前书籍对象的 price 属性是否大于 500。
返回值：filter 方法会创建一个新数组，包含所有通过测试（即函数返回 true）的元素。在本例中，所有价格大于500的书籍对象会被包含在返回的新数组中。

————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_45782719/article/details/135950612

发表评论 取消回复

发表评论取消回复