Vue一些其他指令：v-text、v-html、v-pre、v-once

最新推荐文章于 2024-08-21 18:34:09 发布

原创最新推荐文章于 2024-08-21 18:34:09 发布 · 992 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #其他 #html

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了 Vue 中的四个重要指令：v-text、v-html、v-once 和 v-pre。v-text 用于绑定元素的文本内容，不解析 HTML；v-html 则会解析 HTML 并将其作为元素插入，但可能引发 XSS 攻击；v-once 在初次渲染后使内容静态，避免后续数据变化引起的重新渲染，提高性能；v-pre 跳过其所在节点及子节点的编译，提升效率。理解并合理使用这些指令能更好地优化 Vue 应用的性能和安全性。

简介

对标题设置的四个指令语法进行介绍：

v-text和v-html

这个指令语法，就是用于绑定元素的text，内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text和v-html</title>
</head>
<body>
    <div id="root">
        <!-- v-text的作用是在其所在元素进行文本内容渲染，并且会覆盖原来的内容 -->
        <!-- 不会进行标签的解析，只会对属性值进行完完整整的展示，这是它跟v-html的区别 -->
        <!-- 没有插值语法灵活，会覆盖原来的内容，并且难以对文本进行拼接 -->
        <div v-text="t1">原来的内容：</div>
        <div>原来的内容：{{t1}}</div>
        <div v-text="t2"></div>
        <hr>
        <!-- v-html与v-text作用类似，只是他会解析标签成为页面的一个元素。 -->
        <div v-html="t3"></div>
        <div v-html="t2"></div>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:"#root",
            data:{
                t1:"v-text介绍",
                t2:"<a href='https://www.baidu.com'>百度一下</a>",
                t3:"v-html介绍"
            }
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述
由于v-html会解析html结构，所以会存在安全性问题，永远不要用在用户提交的内容上，否则会容易收到xss攻击。

v-once

v-once的作用是使其在他作用的节点及其子节点初次渲染后，就定为静态内容，然后之后数据的改变不会引起v-once所在节点的重新渲染，可用于优化性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
</head>
<body>
    <div id="root">
        <div v-once>{{d1}}
            <div>{{d1}}</div>
        </div>
        <div>{{d1}}</div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                d1:"v-once"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-pre

作用：跳过其所在节点及其子节点的编译过程，可以利用他跳过没有指令语法和插值语法的节点，加快效率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-pre</title>
</head>
<body>
    <div id="root">
        <div v-pre>{{d1}}
            <div>{{d1}}</div>
        </div>

        <div>{{d1}}</div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                d1:"v-pre"
            }
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述