Vue指令之v-html

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

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

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

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    <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>