Vue学习之路第四篇：v-html指令

发布时间：2020-12-16 23:27:31 所属栏目：百科来源：网络整理

导读：上一篇我们讲解了两种方式，把Vue对象的数据展示在页面上： 1、插值表达式 2、v-text指令但是如果我们展示的数据包含元素标签或者样式，我们想展示标签或样式所定义的属性作用，该怎么进行渲染，比如展示内容为：这是一个h1元素内容。我们先用插值表达式

上一篇我们讲解了两种方式，把Vue对象的数据展示在页面上：

1、插值表达式

2、v-text指令

但是如果我们展示的数据包含元素标签或者样式，我们想展示标签或样式所定义的属性作用，该怎么进行渲染，比如展示内容为：

这是一个h1元素内容

。我们先用插值表达式和v-text尝试一下。

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el : </span>"#app"<span style="color: #000000"&gt;,data : {
            msg : </span>"<h1>这是一个h1元素内容</h1>"<span style="color: #000000"&gt;
        }
    });
</span></script>

运行结果，如下：

结论：插值表达式和v-text指令被直接解析为了字符串元素。对此Vue提供了另外一个指令：v-html

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el : </span>"#app"<span style="color: #000000"&gt;,data : {
            msg : </span>"<h1>这是一个h1元素内容</h1>"<span style="color: #000000"&gt;
        }
    });
</span></script></pre>

运行结果：

成功的解析了标签属性。大家也可以尝试定义样式属性看看，如下：

这是一个h1元素内容

每天进步一点点！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!