我要评论上一篇我们讲解了两种方式，把vue对象的数据展示在页面上：
1、插值表达式
2、v-text指令
但是如果我们展示的数据包含元素标签或者样式，我们想展示标签或样式所定义的属性作用，该怎么进行渲染，比如展示内容为：<h1>这是一个h1元素内容</h1>。我们先用插值表达式和v-text尝试一下。
<body>
<div id="app">
<p v-cloak>{{ msg }}</p>
<p v-text="msg"></p>
</div>
<script type="text/javascript">
var vm = new vue({
el : "#app",
data : {
msg : "<h1>这是一个h1元素内容</h1>"
}
});
</script>
</body>
运行结果，如下：
结论：插值表达式和v-text指令被直接解析为了字符串元素。对此vue提供了另外一个指令：v-html
<div id="app">
<p v-cloak>{{ msg }}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
<script type="text/javascript">
var vm = new vue({
el : "#app",
data : {
msg : "<h1>这是一个h1元素内容</h1>"
}
});
</script>
运行结果：
成功的解析了标签属性。大家也可以尝试定义样式属性看看，如下：
var vm = new vue({
el : "#app",
data : {
msg : "<h1 style='color:red'>这是一个h1元素内容</h1>"
}
});
每天进步一点点！
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论