内容show if
作用
控制显示隐藏
数据
- 第一步
准备数据
- 第二步
标签属性里加入指令
<div v-show="flag" class="box">我是show</div> <div v-show="flag" class="box">我是if</div>注意
指令后需要添加class="box">+显示内容（两个<div>中间）
显示
区别
v-show用于频繁切换场景（），v-if要么显示要么隐藏
当数据为false时后台检查v-show盒子仍然存在，v-if不存在
总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div v-show="flag" class="box">我是show</div> <div v-show="flag" class="box">我是if</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { flag: true } }) </script> </body> </html>
)
