本文深入探讨Vue.js中{{}
Vue的一些输出指令
{{字段}}，v-text指令，v-html指令
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Vue.js学习第二课</title>
<!--1.导入vue包-->
<script src="~/Scripts/vue/vue.min.js"></script>
<style>
[v-cloak] {
display:none;
}
</style>
</head>
<body>
<div id="divApp">
@*使用v-cloak 能够解决插值表达式的闪烁问题，即当网络等原因，导致需要获取的数据加载较慢时，为了不显示
{{msg}}这个字符串出来，让它在加载完成前先隐藏*@
<!--{{msg}}前后的加减号，不会因为加载数据而被覆盖-->
<p v-cloak>+++{{msg}}---</p>
<!--v-text指令，效果跟上面一样，但是默认没有闪烁问题-->
<!--v-text指令，会覆盖元素中原本的内容-->
<h4 v-text="msg"></h4>
<!--会解析数据中的html，而上面2个都不可以-->
<div v-html="msg2"></div>
</div>
<script>
var v = new Vue({
el: '#divApp',
data: {
msg: '我只有在加载完成后才显示',
msg2: '<h1>哈哈哈哈，我是H！</h1>'
}
})
</script>
</body>
</html>
总结一下，大部分情况下都是用{{}}的方式输出数据，考虑到闪烁的问题，需要用上v-cloak来控制加载完成前的样式比较好。
{{}}方式是在指定位置输出内容，而v-text作为元素的指令，控制的是整个元素的文本内容，如果之前有内容，会进行覆盖，但是不会有闪烁问题。因此根据不同的场景和内容拼接的复杂情况，选择不同的方式。
v-html指令则是可以输出Html，例如例子中的<H1>标签，不然就会被当作文本输出了。
运行结果
上一篇
Vue.js 学习笔记 一
下一篇
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
