Vue指令之v-html

Vue特殊标签属性实现HTML渲染

最新推荐文章于 2025-10-24 16:38:47 发布

原创最新推荐文章于 2025-10-24 16:38:47 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #javascript

前端开发专栏收录该内容

9 篇文章

订阅专栏

博客介绍了Vue中以‘v’开头的特殊标签属性，可在标签里实现特殊功能。以渲染inner html为例，若不使用特殊属性，只会显示源码；添加特定标签属性并赋值后，能成功渲染出超链接。

在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.youkuaiyun.com/ShadyPi">
                    ShadyPi's blog
                </a>`
            }
        })

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