前端应用_Vue_Vue常见的指令v-cloak v-text v-html 优缺点以及使用场景分析

最新推荐文章于 2024-05-14 20:08:50 发布

上海_彭彭

最新推荐文章于 2024-05-14 20:08:50 发布

阅读量1.3k

点赞数

分类专栏： Vue.js 文章标签： vue v-cloak v-text v-html优缺点

本文链接：https://blog.csdn.net/qq_34979346/article/details/98493706

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

所有的Vue指令有个共同的特点就是开头是v-，有了指令能实现适合我们的场景，下边我们看下这几个指令吧

以下边的实例讲解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">   //导入vue

    </script>

</head>
<body>
<p id="pp">{{message}}</p>
<div>
    <script>
        var vue=new  Vue(
            {
                el:'#pp',
                data:{
                    message: 'Hello,Vue'
                }
            }
        )

    </script>

</div>
</body>
</html>

v-cloak

标签是先加载的，由于vue 加载延迟一点，就会导致一个问题，当网速很慢的时候，就会先显示p标签的内容（{{message}}）
等加载Vue好了，就会显示 message里的内容. 问题来了，如何解决呢，就是用v-cloak 指令，然后调用样式直接删除.

实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;   //样式属性
        }
    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
</head>
<body>
<p id="pp" v-cloak>{{message}}</p>
<div>
    <script>
        var vue=new  Vue(
            {
                el:'#pp',
                data:{
                    message: 'Hello,Vue'
                }
            }
        )
    </script>

</div>
</body>
</html>

优点：

可以在插值里面随便写，你也可以这么写
{{message}}
都能显示出来
用这个可以解决插值闪烁问题，（{{message}}）

缺点：需要写v-cloak css 属性才能解决闪烁问题.

v-text

我们重新写下实例代码 p标签：

<p id="pp" v-text="message">-\========gthgh===</p>

但是页面显示为：

Hello,Vue

说明 v-text 我只是吧 v-text后边的值显示出来，你中间插入什么我都不管.

优点：

直接解决插值闪烁的问题，由于插值根本不显示，所以根本就没有闪烁的问题
只适合显示场景.
缺点：
如果想在标签里插入值是做不到的。

v-html

我把data 稍微改下：

 var vue=new  Vue(
            {
                el:'#pp',
                data:{
                    message: 'Hello,Vue',
                    message2:'<h1>我是一个超大的head，请避让下</h1>'
                }
            }
        )

我的初衷是把h1的样式也解析出来，把那句话变成h1样式，

直接用看可以吗？

但是显示的结果为：

我是一个超大的head，请避让下

这就犯难了，我如何才能识别我的html标签呢，强大的vue 不会为这个难倒的。直接用

v-html指令完美的解决，修改如下：

直接看效果图：

在这里插入图片描述

优点：

能插入带有html 标签的 message ，

缺点：和v-text一样，都会清空标签内的值，然后插入自己的message

上海_彭彭

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端应用_Vue_Vue常见的指令v-cloak v-text v-html 优缺点以及使用场景分析

所有的Vue指令有个共同的特点就是开头是v-，有了指令能实现适合我们的场景，下边我们看下这几个指令吧以下边的实例讲解：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <...
复制链接

扫一扫