vue.js(2)--v-cloak v-text v-html

2019-08-14 10:32:56来源:博客园 阅读 ()

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标签的内容,同时也会覆盖原标签的内容


原文链接:https://www.cnblogs.com/qiqisusu/p/11338421.html
如有疑问请与原作者联系

标签:QHTMLIEem区别Span

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js实现简单进度条

下一篇:js数组与对象的区别