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

最新推荐文章于 2022-08-30 22:30:55 发布

加沙的感慨

最新推荐文章于 2022-08-30 22:30:55 发布

阅读量220

点赞数

文章标签： 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>