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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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