Vue指令之v-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>Documenttitle>
head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
    <div id="box">
        {{msg}}
        
    div>
    <script>
        const app = new Vue({
            el: "#box",
            data:{
                msg:`
                
                    ShadyPi's blog
                `
            }
        })

    script>
body>
html>

效果如下:
Vue指令之v-html_第1张图片
但是如果把容器中的元素添加一个标签属性v-html,并将该属性的值赋为msg,即

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

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

Vue指令之v-html_第2张图片

你可能感兴趣的:(前端开发,vue.js,html,javascript)