v-once指令
once:一旦,当...时候
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!-- v-once 单独使用，限制的标签内容一旦赋值，便不可更改 --> <input type="text" v-model="msg"> <input type="text" v-model="msg" v-once> <p>{{ msg }}</p> <p v-once>{{ msg }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '初始值' } }) </script> </html>
v-once,单独使用,限制的标签内容一旦被赋值,便不可修改,即使是data内的赋值.
v-colak指令:斗篷指令
让页面在加载的时候,取消刷新带来的后端数据显示的闪烁效果.
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> [v-cloak] { display: none; 先让页面默认不显示 } </style> </head> <body> <div id="app" v-cloak> {{ }} {{ }} {{ }} </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', }) </script> </html>
处理的方法:也可以把vue.js环境加载在body代码执行之前.
事件指令
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p v-if="isShow">if条件指令</p> <p v-show="isShow">show条件指令</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { isShow: false, } }) </script> </html>
总结:
两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时
v-if是不渲染标签
v-show以 display:none 方式渲染
