vue中v-for和v-if谁先被解析

最新推荐文章于 2023-03-17 00:02:03 发布

加沙的感慨

最新推荐文章于 2023-03-17 00:02:03 发布

阅读量197

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_42883683/article/details/114903951

版权

最近看到一个比较有意思的问题就是：vue中v-for和v-if同时在一个标签中，浏览器解析的时候会先解析v-for呢还是v-if。为了探明究竟，做了一个小测试，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="App">
        <p v-for="item in cha" v-if="isok">{{item.a}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        const App = new Vue({
            el: "#App",
            data() {
                return {
                    cha: [
                        { a: "as" },
                        { b: "ad" },
                    ]
                }
            },
            computed: {
                isok() {
                    return this.cha && this.cha.length > 0;
                }
            },
        })
        console.log(App.$options.render);
    </script>
</body>

</html>

输出结果是：
在这里插入图片描述

可以看出解析渲染过程是先进入循环遍历数组，然后进行条件判断。

结论：v-for和v-if一起使用时，v-for先被解析。

加沙的感慨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中v-for和v-if谁先被解析

最近看到一个比较有意思的问题就是：vue中v-for和v-if同时在一个标签中，浏览器解析的时候会先解析v-for呢还是v-if。为了探明究竟，做了一个小测试，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
复制链接

扫一扫