1、区别
1）v-if删除dom元素
2）v-show设置display:none
2、应用场景
1）v-if只修改一次的时候可以使用v-if
2）v-show频繁切换的时候可以使用v-show
3、v-if案例
<div id='app'> <div v-if="score < 60"> 不及格 </div> <div v-else-if="score < 70"> 及格 </div> <div v-else-if="score < 80"> 中等 </div> <div v-else-if="score < 90"> 良好 </div> <div v-else-if="score <= 100"> 优秀 </div> </div> <script> const vm = new Vue({ el: '#app', data: { score: 65, } }) </script>
4、v-show案例
<style> .box{ 200px; height: 200px; background: aqua; } </style> <div id='app'> <div class="box" v-show="flag"></div> <button @click="flag=!flag">显示/隐藏</button> </div> <script> const vm = new Vue({ el: '#app', data: { flag:true, } }) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-show与v-if</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click='change'>切换</button> <p v-if='flag'>{{message}}</p> <div v-show='flag'>{{message}}</div> <div v-if="age<18"> 未成年 </div> <div v-else-if="age >= 18 && age<30"> 青年 </div> <div v-else-if="age >= 30 && age<50"> 壮年 </div> <div v-else> 老了 </div> <button @click="age+=10">长大</button> </div> <!-- v-if和v-show的区别 v-if是通过删除元素的方式控制显示和隐藏 v-show是通过控制display的方式控制显示和隐藏 当我们一个元素需要频繁切换的时候，用v-show 当一个元素状态只改变一次的时候，一般用v-if --> </body> <script> var vm = new Vue({ el: "#app", data: { message: "hello Vue", flag: false, age: 10 }, methods: { change() { this.flag = !this.flag; } } }) </script> </html>