1、v-if
（1）v-if运用
<div id="app"> <h2 v-if="true">{{message}}</h2> </div>
只有在为true的时候才会显示数据
（2）v-if与v-else
<div id="app"> <h2 v-if="false">{{message}}</h2> <h1 v-else>hello</h1> </div>
v-if为true的时候执行if，否则，执行else
（3）案例：v-if与v-else的应用
<body> <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号"> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱"> </span> <button @click="isUser=!isUser">切换类型</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { isUser: true } }) </script> </body>
点击切换类型后可以切换显示内容，这个时候会存在input标签复用的问题（切换后输入框中的内容没有改变，这是虚拟DOM，尽可能地复用已经存在的元素，而不是新建一个元素，可以提升性能），可以增加key属性，当key一样的时候就会保留内容，不一样的时候就不会保留
2、v-show
<body> <div id="app"> <h2 v-if="isShow" id="aaa">{{message}}</h2> <h2 v-show="isShow" id="bbb">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', isShow: true } }) </script> </body>
- 与v-if的区别
v-if:当条件为false时, 包含v-if指令的元素, 不会存在dom中
v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none
当显示与隐藏需要频繁切换的时候使用v-show，切换次数较少的时候使用v-if