为什么避免 v-if 和 v-for 用在一起？

最新推荐文章于 2024-07-19 21:03:10 发布

那样的心

最新推荐文章于 2024-07-19 21:03:10 发布

阅读量3.8k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42116924/article/details/97041089

版权

官方文档中的例子只是给了代码的一部分，经过自己的摸索，差不多写出一个可以更好解释这个问题的需求，下面的源码（用vscode编写）：

需求：有一个数组，存有多个对象，每个对象都有一个属性 isName: true 或者 isName: false。现在要遍历每个数组，实现isName: true 时，显示这个名字，isName: false 时不显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
        	// 这是第一种方法，直接把v-if和v-for直接写到一个标签中 
            <!-- <li v-for="(user,index) in users" v-if="user.isName" :key="index"> -->
            //  第二种就是为了避免v-if和v-for同时使用，用到的方法，通过计算属性来实现
            <li v-for="(user,index) in activeUsers" :key="index">
                {{ user.name }}
            </li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                users: [{
                        name: '张三',
                        isName: true,
                    },
                    {
                        name: '李四',
                        isName: true,
                    },
                    {
                        name: '王五',
                        isName: false,
                    },
                    {
                        name: '赵六',
                        isName: true,
                    },
                    {
                        name: '唐七',
                        isName: false,
                    },
                ]
            },
            computed: {
                activeUsers: function () {
                    return this.users.filter(function (user) {
                        return user.isName
                    })
                }
            }
        })
    </script>
</body>
</html>

第一种方法：直接 v-if 和 v-for 同时使用，但是在vue中会优先执行v-for, 当v-for把所有内容全部遍历之后 , v-if再对已经遍历的元素进行删除 , 造成了加载的浪费。

第二种方法：使用计算属性将有 isName: false 属性的名字先过滤掉，再通过 v-for 显示在页面上。

例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
     return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

官方文档解释： https://cn.vuejs.org/v2/style-guide/#避免-v-if-和-v-for-用在一起-必要

那样的心

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
为什么避免 v-if 和 v-for 用在一起？

官方文档中的例子只是给了代码的一部分，经过自己的摸索，差不多写出一个可以更好解释这个问题的需求，下面的源码（用vscode编写）：需求：有一个数组，存有多个对象，每个对象都有一个属性 isName: true 或者 isName: false。现在要遍历每个数组，实现isName: true 时，显示这个名字，isName: false 时不显示。<!DOCTYPE html>...
复制链接

扫一扫