- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
前面我们介绍了几种常用的几个vue指令:v-if、v-else、v-show、v-bind、v-text、v-html等指令。本章我们再来介绍几个指令:v-pre指令、v-cloak指令、v-once指令。
1:v-pre指令。
该指令不会解析vue语法,在模板中跳过vue的编译,而是直接把vue代码输出页面。如:
list:"高时银博客"
<div v-pre>{{list}}</div>
本来{{list}}是应该输出list属性的值 “高时银博客”,而使用了 v-pre 指令后,就直接输出源代码{{list}}。
2:v-cloak指令。
这个指令使用机率非常少。vue绑定数据时,渲染时会出现变量闪烁,例如
<div class="#app">
<p>{{value.name}}</p>
</div>
在加载时会看到{{value.name}}在页面出现,过几秒才会渲染数据。而v-cloak就是用来解决这个问题的,如:
<div class="#app" v-cloak>
<p>{{value.name}}</p>
</div>
在css里面要添加:
[v-cloak] {
display: none;
}
这样就可以防止页面闪烁了。不过,实际使用中,我很少看到变量闪烁的情况,也许是数据量太小的缘故吧。
3:v-once指令。
这个指令表示,只渲染一次。
<div v-once>{{massage}}</div>
<input v-model="massage" type="text">
<div>{{massage}}</div>
上面代码中,第一个div中的{{massage}}只渲染一次,当我们在input输入框中修改massge值时,第一个div因使用了v-once指令而不会再发生变化,而第二个div的内容会跟input内容变化而变化,如下图:
这些指令还真的经常用到,谢谢博主的细心分享哈。