v-once与v-html与v-text与v-pre与v-cloak

1.v-once

只会在第一次展示数据,如果想继续改变,不会跟着改变,不太常用

v-once与v-html与v-text与v-pre与v-cloak_第1张图片

 v-once与v-html与v-text与v-pre与v-cloak_第2张图片

 v-once与v-html与v-text与v-pre与v-cloak_第3张图片

2.v-html

v-once与v-html与v-text与v-pre与v-cloak_第4张图片

 aca19a610e4d48dd89a3f290199cb566.png

v-once与v-html与v-text与v-pre与v-cloak_第5张图片

 3.v-text

0a9e5b3ed824445da2b97d2303be696a.png

81ac7bd7b5e7488e8059896a1b042c0f.png

02ce3615eda34b18a0b8a31643ba617a.png

 如果添加文本,不会显示,只会显示v-text的,一般不用,用mustache更多

4.v-pre

 v-once与v-html与v-text与v-pre与v-cloak_第6张图片

 比如单纯就是想显示{{message}}不希望被解析

32be333797514838ab162f6c23436055.png

 5.v-cloak

因为设置了时间,如果不加v-cloak会看到没有渲染的{{message}}

v-once与v-html与v-text与v-pre与v-cloak_第7张图片

 如果加了v-cloak直到渲染完毕才会显示出来,否则就是display none,从而代替mustache的显示

v-once与v-html与v-text与v-pre与v-cloak_第8张图片

v-cloak也不是很常用

因为模板会被渲染成函数,到时候使用的是虚拟dom

mustache




  
  Title



{{message}}

{{message}},学习vue

{{firstClass+"与"+secondClass}}

{{firstClass}} {{secondClass}}

{{counter*2}}

v-once 




  
  Title



{{message}}

{{message}}

v-html




  
  Title



{{url}}

v-text




  
  Title



{{message}},晚上好

,晚上好

v-pre 




  
  Title



{{message}}

{{message}}

v-cloak(待修改




  
  Title
  





{{message}}

你可能感兴趣的:(vue学习,前端,html,vue.js)