v-cloak解决插值表达式闪烁问题

最新推荐文章于 2024-07-11 14:17:30 发布

快乐的菜菜

最新推荐文章于 2024-07-11 14:17:30 发布

阅读量141

点赞数

文章标签： vue.js

快乐的菜菜

本文链接：https://blog.youkuaiyun.com/weixin_39455643/article/details/113482975

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    <!-- v-cloak解决插值表达式闪烁问题 -->
    <style>
    
        [v-cloak]{

            display: none;  

        }

    </style>
</head>
<body>
    
    <div id="app">

        <p v-cloak>{{str1}}</p>
        <p v-cloak>{{str2}}</p>

    </div>
    
    <script>
    
        var vm = new Vue({

            el : "#app",    //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
            data : {    //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
                //data属性中，存放的是el中要使用到的数据
                "str1" : "HelloWorld1", 
                "str2" : "HelloWorld2"

            }

        });

    </script>

</body>
</html>