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