4.1.6　v-html

v-html指令用于更新元素的innerHTML。其内容按普通HTML插入，不会作为Vue模板进行编译。

Mustache语法（双大括号）会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令。

提示： 不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。

例如想要输出一个a标签，首先需要在data属性中定义该标签，然后根据需要定义href属性值和标签内容，再使用v-html绑定到对应的元素上。

【例4.6】输出真正的HTML（源代码\ch04\4.6.html）。

    <div id="app">
        <!—简单的文本插值-->
        <h2>{{ website}}</h2>
        <!—输出HTML代码-->
        <h2 v-html="website"></h2>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
        const vm= Vue.createApp({
            //该函数返回数据对象
            data(){
              return{
                website:'<a href="https://www.baidu.com">百度</a>'
               }
            }
            //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

在谷歌浏览器中运行程序，按F12键打开控制台，并切换到 “Elements”选项，可以发现使用v-html指令的p标签输出了真正的a标签。当单击“百度”按钮后，页面将跳转到对应的页面，效果如图4-9所示。

从结果可知，Mustache语法不能作用在HTML特性上，如果需要控制某个元素的属性，可以使用v-bind指令。

注意： 在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击。只在可信内容上使用v-html，禁止在用户提交的内容上使用v-html指令。 404UYqiJ3qbschpY60a6FWByZoiSaz0ZXEFwRPBeHR+R/0JCwqa4ZF0cbtiZ10D3