Vue之v-for和v-for为什么强烈不推荐和v-if用在一起

最新推荐文章于 2023-02-28 20:43:03 发布

姜泥断了姒

最新推荐文章于 2023-02-28 20:43:03 发布

阅读量264

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_46772005/article/details/124689835

版权

一、什么的v-for：

v-for就是循环遍历数据

二、v-for的使用

1.遍历普通数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>

<!--    创建容器-->

<div id="arr">
<!--    遍历普通数组-->
        <ul>
    <!--        如果就一个变量，那么显示的是这个数组的数据-->
<!--            <li v-for="item in array">姓名：{{item}}</li>-->

    <!--        如果是二个变量，那么第一个变量是数组的数据，第二个变量的数组的下标-->
            <li v-for="(item,index) in array">姓名：{{item}} ---- 序号：{{index}}</li>
        </ul>
</div>

</body>
</html>
<script>
    new Vue({
        el: "#arr",
        data: {
           array: ['姜泥', '徐凤年', '陈芝豹']
        }
    });
</script>

2.遍历对象数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>

<!--    创建容器-->

<div id="arr">
    <!--    遍历对象数组-->
        <table cellpadding="0" cellspacing="0" border="2px solid blick" width="500px">
            <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
            </thead>
            <tbody style="text-align: center">
            <!--  当只有一个变量的时候，那么这个变量是一个对象      -->
<!--            <tr v-for="item in obj">-->
<!--                <td>{{item}}</td>-->
<!--            </tr>-->

            <!--  当有而个变量的时候，那么这个变量是一个对象，第二个变量是下标      -->
            <tr v-for="(item,index) in obj">
                <td><input type="checkbox"></td>
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.address}}</td>
            </tr>
            </tbody>
        </table>
</div>

</body>
</html>
<script>
    new Vue({
        el: "#arr",
        data: {
                obj: [{
                    name: '姜泥',
                    age: 22,
                    sex: '女',
                    address: '西楚'
                   }, {
                    name: '徐凤年',
                    age: 24,
                    sex: '男',
                    address: '北凉'
                   }, {
                    name: '洪洗象',
                    age: 24,
                    sex: '男',
                    address: '武当'
                   }]
        }
    });
</script>

3.遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>

<!--    创建容器-->

<div id="arr">
       <!--    遍历对象-->
    <ul v-if="obj.code == 101">
        <!--        当只有一个变量的时候，获取的是对象的属性值-->
        <!--        <li v-for="item in obj">{{item}}</li>-->

        <!--        当有二个变量的时候，第一个变量获取的是对象的属性值，第二个变量是属性名-->
<!--        <li v-for="(obj1,obj2) in obj">{{obj1}},{{obj2}}</li>-->

        <!--当有三个变量的时候，第一个变量获取的是对象的属性值，第二个变量是属性名，第三个变量是小标-->
        <li v-for="(obj1,obj2,obj3) in obj">{{obj1}},{{obj2}},{{obj3}}</li>
    </ul>
    <ul v-else>请求失败</ul>
</div>

</body>
</html>
<script>
    new Vue({
        el: "#arr",
        data: {
             obj: {
                 code: 101,
                 message: "查询成功",
                data: "我是数据"
             }

        }
    });
</script>

当code的值为101的时候，会渲染数据，当code的值不为101时，则会渲染请求失败，可以自行尝试一下。

三、v-if和v-for不能同时出现在同一个标签里面

在我遍历对象的时候，在容器里面有一个ul，上面加了一个v-if的判断，为什么我不想之前的写法一样，for循环里面嵌套if判断呢？

因为，在Vue里面，v-for的优先级比v-if高，如果v-for嵌套v-if后，v-for会先循环遍历所以的数据，然后才会继续v-if的判断，这样的写法，会导致很多不必要的判断，增加系统的压力。

而，如果把v-if移至v-for前面的话，那么就只会判断一次是否正确，从而在v-for里面就不会去遍历错误的信息，间接的减少了运行的压力，使得可以更好地渲染和维护

姜泥断了姒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之v-for和v-for为什么强烈不推荐和v-if用在一起

一、什么的v-for：v-for就是循环遍历数据二、v-for的使用 1.遍历普通数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue入门程序</title></head><body><script src=".....
复制链接

扫一扫