//style
<style>
[v-cloak]{
display:none
}
</style>
//html
<div id="app">
<p v-cloak>+++{{msg}}---<p>
<p v-text="msg2">+++---</p>
<div v-html="msg3"></div>//msg3的内容 标签h1会被渲染
</div>
//script
<script>
var vm = new Vue({
el:'app',
data:{
msg:'hello,vue',
msg2:'hello,vue,使用v-text方式',
msg3:'<h1>哈哈哈哈哈哈哈</h1>'
}
})
</script>
说明:
使用v-cloak能够解决插值表达式的加载内容的闪烁问题,另外在style中定义的样式[v-cloak],在标签元素中使用的时候可以改不加class=" ",直接使用
v-text默认是没有内容加载的闪烁问题。
另外 使用插值表达式不会影响符号++--的加载,而使用v-text的话,++--会被msg2的内容替换掉,可以这么理解,标签元素p里初始内容是+++---,当页面元素加载到v-text的时候,就用v-text指向的msg2的内容替换掉标签中的原来的内容。
使用插值表达式,只是替换自己的这个占位符,不会把整个元素的内容清空。
v-html可以渲染指定的html元素。