Vue常见指令——v-cloak

将数据编写完成，通过插值表达式输出到视图，在刷新的时候出现很短的源代码，如图：

vue数据闪动问题

指令v-cloak的作用就是用来解决浏览器在加载页面时因存在事件差而产生的闪动问题，她的原理是先隐藏文件挂载位置，处理渲染好后在显示最终结果。这个指令需要与css规则一起使用才可以

官方文档地址：https://cn.vuejs.org/v2/api/#v-cloak

如果是在真实项目中，可以将v-clock写在根元素上面

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 使用属性选择器 */
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 在这个标签中中编写Vue的视图 -->
    <div id="app">
        <!-- 1直接进行使用 -->
        <p v-cloak> {{str}} </p>
        <hr>
        <!-- 2字符拼接进行输出 -->
        <p> {{str + '拼接文本'}} </p>
        <!-- 3进行数学运算 -->
        <p> {{num +10}} </p>
        <!-- 4三元表达式 -->
        <p> {{age > 18 ? '成年人' : '未成年' }} </p>
        <!-- 5 使用方法，将字符串进行剪切 -->
        <p> {{str.substr(1,5)}} </p>

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // !创建Vue实例
    new Vue({
        // 通过el绑定元素
        el: '#app',
        // 所有的数据都放在data中
        data: {
            // 定义一个数据
            str:"Vue里面data里面的数据",
            num:10,
            age:13,
            str:'0123456789'
        },
    })
</script>

</html>

闪动问题解决

 

posted @ 2021-01-06 10:17  小小的少年  阅读(4392)  评论(0)    收藏  举报