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

最新推荐文章于 2024-01-29 15:08:32 发布

codexgh

最新推荐文章于 2024-01-29 15:08:32 发布

阅读量68

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46910833/article/details/109017241

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2.v-cloak，v-text，v-html的使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过cdn引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <!-- 使用v-cloak 可以解决 插值表达式闪烁的问题 -->
        <p v-cloak>===={{msg}}------</p>
        <!-- 默认 v-text 是没有闪烁问题的
            但是，v-text 会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把整个元素的内容清空
        -->
        <p v-text="msg">------</p>
        <!-- v-html也会覆盖元素原本的内容，但是同时也会解析 html标签  -->
        <p v-html="msg1"></p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '123',
                msg1: '<h2>这是v-html属性</h2>'
            }
        });
    </script>
</body>

</html>