v-cloak,v-text,v-html的用法以及区别

最新推荐文章于 2024-06-22 14:33:40 发布

五花毛

最新推荐文章于 2024-06-22 14:33:40 发布

阅读量446

点赞数

分类专栏： Vue 文章标签： v-cloak v-text v-html

本文链接：https://blog.csdn.net/Hanhanyoona/article/details/88992679

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

v-cloak: 用来解决插值表达式闪烁问题.利用vue在渲染元素完成后,v-cloak属性就会消失的特性给有属性v-cloak的元素设置display:none;

v-text: 默认没有闪烁问题, 会覆盖元素中原本的内容.

v-html: 默认没有闪烁问题, 会把内容当做HTML来解析.

<!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>v-cloak,v-text,v-html</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-cloak  能够解决插值表达式闪烁问题 -->
        <p v-cloak>+++++ {{ msg }} +++++</p>
        <!-- v-text 默认没有闪烁问题, 会覆盖元素中原本的内容 -->
        <p v-text="msg">=====</p>
        <!-- v-html 会把内容当做HTML来解析 -->
        <p v-html="msg2"> 123 </p>
    </div>

</body>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            msg2: '<h1>hello world </h1>'
        }
    })
</script>

</html>

五花毛

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
v-cloak,v-text,v-html的用法以及区别

v-cloak: 用来解决插值表达式闪烁问题.利用vue在渲染元素完成后,v-cloak属性就会消失的特性给有属性v-cloak的元素设置display:none;v-text: 默认没有闪烁问题, 会覆盖元素中原本的内容.v-html: 默认没有闪烁问题, 会把内容当做HTML来解析.<!DOCTYPE html><html lang="en">&lt...
复制链接

扫一扫

专栏目录