Vue指令之v-html

ShadyPi

于 2023-11-28 15:33:55 发布

阅读量1.2k

点赞数 11

分类专栏：前端开发文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/ShadyPi/article/details/134668701

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在Vue中有很多特殊的标签属性，这些属性一般以’v’开头，用于在标签中实现特殊的功能。

例如，当Vue实例的data是一个inner html，我们想在网页上渲染这部分html，如果依然使用之前的{{ variable }}，则只会将inner html的源码显示出来，无法进行渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id="box">
        {{msg}}
        <!-- <div v-html="msg"></div> -->
    </div>
    <script>
        const app = new Vue({
            el: "#box",
            data:{
                msg:`
                <a href="https://blog.csdn.net/ShadyPi">
                    ShadyPi's blog
                </a>`
            }
        })

    </script>
</body>
</html>

效果如下：
在这里插入图片描述
但是如果把容器中的元素添加一个标签属性v-html，并将该属性的值赋为msg，即

<div v-html="msg"></div>

则能成功渲染出指向我博客的超链接：

在这里插入图片描述

ShadyPi

关注

11
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue指令之v-html

例如，当Vue实例的data是一个inner html，我们想在网页上渲染这部分html，如果依然使用之前的。在Vue中有很多特殊的标签属性，这些属性一般以’v’开头，用于在标签中实现特殊的功能。，则只会将inner html的源码显示出来，无法进行渲染。但是如果把容器中的元素添加一个标签属性。，并将该属性的值赋为msg，即。
复制链接

扫一扫