Vue知识整理，让你快速入门Vue.js：03_3.本地应用：v-html指令、v-html和v-text指令的区别

被开发耽误的大厨

已于 2022-06-04 23:40:31 修改

阅读量497

点赞数 1

分类专栏： web前端（H5）文章标签： vue.js html javascript

于 2020-03-21 20:44:43 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/105007884

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

上一篇文章我们介绍了v-text指令，它的作用是设置文本，接下来我们开始学习另外一个类似的指令v-html，

一、v-html指令语法介绍

这个指令的作用是：设置标签的innerHTML。知道这个属性以后，你可能想到它跟v-text的区别了，

如果设置的值是普通文本，它跟v-text效果是一样的。

如果设置的值比较特殊，比如说是html结构，那么结果就不一样了，它会被解析出来！

语法已经介绍完毕，接下来我们进行代码验证测试

二、代码验证测试

1、v-html指令使用_普通文本

（1）实例代码

<!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>04_v-html指令使用_普通文本</title>
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "你好程序员!",
            }
        })
    </script>

</body>

</html>

（2）效果展示

如果设置的值是普通文本，v-html 跟 v-text效果是一样的。

2、v-html指令使用_html结构

（1）实例代码

<!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>05_v-html指令使用_html结构</title>
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //content: "你好程序员!",
                content: "<a href='https://www.baidu.com'>百度一下</a>",
            }
        })
    </script>

</body>

</html>