vue自学之 v-cloak、v-text、 v-html

最新推荐文章于 2024-09-14 08:09:14 发布

158nothing

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量154

点赞数 1

文章标签： vue html vue.js

本文链接：https://blog.csdn.net/qq_44643011/article/details/104006207

版权

三个指令

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../code/lib/2.6.11vue.js"></script>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">

        <!--使用v-cloak可以解决插值表达式闪烁的问题-->
        <p v-cloak>=================={{mes}}555555555555555</p>
        <!--使用v-text没有闪烁问题·但是会覆盖原文本的内容，插值表达式只会替换自己的占位符，不会把整个元素都进行覆盖-->
        <h4 v-text='mes'>==========</h4>
        <p v-html='charge'></p>
        <p v-text='charge'></p>
        <p>{{charge}}</p>
    </div>
    <script src="../code/lib/2.6.11vue.js"></script>


    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                mes: 123,
                charge: '<h1>这就是差距</h1>'
            }
        })
    </script>
</body>

</html>

v-cloak

v-cloak可以产生插值表达式闪烁的问题，不会覆盖本标签内的内容，选择性覆盖插值表达式内的内容，插值表达式以外的内容不会进行覆盖，闪烁问题可以借助css消除

<p v-cloak>=================={{mes}}555555555555555</p>

v-text

v-text会对自己控制的标签内容进行全覆盖，所以我感觉没有使用的必要，但是不会有闪烁的问题

<!--使用v-text没有闪烁问题·但是会覆盖原文本的内容，插值表达式只会替换自己的占位符，不会把整个元素都进行覆盖-->
        <h4 v-text='mes'>==========</h4>

v-html

无论是v-cloak还是v-text，对于包含html标签的字符串都会直接解释，不存在再次解释的问题，如果调用这个的话就会解决这种尴尬。

<p v-html='charge'></p>
        <p v-text='charge'></p>
        <p>{{charge}}</p>

在这里插入图片描述

158nothing

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫