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>标签,不然就会被当作文本输出了。
运行结果
上一篇