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

最新推荐文章于 2024-10-02 05:39:15 发布

baiqiu2777

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量69

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qiqisusu/p/11338421.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>