vue.js（2）--v-cloak v-text v-html

v-cloak v-text  v-html的使用

（1）实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-cloak.v-text.v-html</title>
    <script src="../lib/vue.js"></script>     <!--导入vue.js -->
    <style>
        [v-cloak]{
            display: none;
        }/*设置v-cloak类中的display为none来解决插值表达式的闪烁问题*/
    </style>
</head>
<body>  
    <div class="app">
        <h1 v-cloak>++++{{ msg }}-------</h1>
        <!-- 使用插值表达式会有闪烁问题  -->
        <!-- 使用插值表达式可以在前后添加内容，而v-text会覆盖标签内的内容 -->
        <h4 v-text="msg"></h4>
        <!-- 使用v-text没有闪烁问题 -->
        <p v-html="msg2"></p>
        <!-- 使用v-html可以将msg2内容当做html进行输入，同时也会覆盖标签内容 -->
    </div>
    <script>
        var vm = new Vue({
            el:'.app',
            data:{
                msg:'努力学习vue',
                msg2:'<h2>hello world</h2>'
            }
        })
    </script>
</body>
</html>

（2）v-cloak v-text v-html和插值表达式的区别与特点

　　使用插值表达式会有闪烁问题

　　设置v-cloak类中的display为none来解决闪烁问题

　　使用插值表达式可以在前后添加内容，v-text会覆盖标签内容

　　使用v-text没有闪烁问题

　　使用v-html来添加带有html标签的内容，同时也会覆盖原标签的内容

posted @ 2019-08-12 11:15  齐齐怪  阅读(219)  评论(0)  编辑  收藏  举报