Vue之v-if和v-show，外加v-if VS v-show

一、v-if

v-if：主要是根据条件进行显示或隐藏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script><!--    创建容器-->
<div id="container">
<!--    --><h1>今天做核酸了吗？</h1><h1 style="color: green" v-if="bo">做核酸了</h1>
</div>
</body>
</html>
<script>// 1、创建Vue对象new Vue({//el 为创建容器的类名el:"#container",data:{bo:false,}});</script>

当Vue对象里面bo的属性值为false的时候，做核酸了就会被隐藏，反之当bo的属性值为true的时候，则做核酸了会显示

二、v-if的扩展

当然v-if和JavaScript中的if（）判断是一样的，也有v-else和v-else-if

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script><!--    创建容器-->
<div id="container">
<!--    --><h1>今天做核酸了吗？</h1><h1 style="color: green" v-if="bo">做核酸了</h1><h1 style="color: green" v-else-if="bol">没有感染</h1><h1 style="color: red" v-else>去求了</h1>
</div>
</body>
</html>
<script>// 1、创建Vue对象new Vue({//el 为创建容器的类名el:"#container",data:{bo:false,bol:false,}});</script>

当v-if的判断为false的时候，就会继续判断v-else-if

如果v-else-if为true则，显示没有感染，如果为false，则v-else显示去求了

它们的判断原理和JavaScript中的if（）判断的原理是一致的，在这里不做过多的解释

三、v-show

v-show和v-if的用法有异曲同工之妙

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script><!--    创建容器-->
<div id="container">
<!--    --><h1>今天做核酸了吗？</h1><h1 style="color: yellow" v-show="boll">做核酸了</h1>
</div>
</body>
</html>
<script>// 1、创建Vue对象new Vue({//el 为创建容器的类名el:"#container",data:{boll:true}});</script>

v-show也是当值为true的时候显现，当值为false的时候隐藏

四、v-if和v-show的区别

既然它们二个都是判断条件是否隐藏的，为什么要搞二个一模一样的呢，其他它们的区别非常的大

区别：

1.v-if的隐藏和显示（创建和销毁）是操作DOM；

v-show的显示和隐藏是操作CSS。

2.v-if只有判断条件是正确的时候，才会创建新标签；

v-show是无论条件是否正确，都创建新标签。

3.v-if只有条件不经常修改和切换少的时候，才会使用；

v-show适用于需要经常，频繁切换的时候使用。

4.由于v-if是操作DOM，当条件不成立的时候，是销毁，看不到了；

v-show操作CSS，当条件不成立的时候，相当于display：none，可以看到。