vue学习(二) 三个指令v-cloak v-text v-html

//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元素。