vue:v-show和v-if指令
这一篇我们来看v-show指令：
这个东西，可以让一些图片啥的在只有满足某些条件的情况下才显示出来，比如说，年龄必须大于等于18岁。
我们现在就搞一张冰墩墩的图片，然后我们弄一个点击器，点一下，显示，再点一下，不显示，再点一下，又显示，这样反复循环。
首先图片必须是有的，这个搞个img标签就好了。然后必须要给个v-show指令，里面是一个变量，啥变量？不着急慢慢来。
我们现在创建一个vue的app变量，除了必须要有的变量必须写之外，我们在data中创建一个isShow变量，初始值默认为false.
这个时候我们再写一个函数，实现逻辑很简单：this.isShow = !this.isShow;
所以，在img标签下的v-show指令出，写isShow。
接着我们需要一个点击事件，自然需要一个点击的东西。创建一个input，按钮类型，绑定的click呢自然就是上面那个函数。
这时你会发现刚开始没有图片，点击按钮，图片显示，再点，无，再点，有。。。
现在我们想要加一个年龄限制，不妨再弄一个冰墩墩，然后v-show那里写上age>=18.在data里面加上这个，默认年龄为15岁。
再写一个函数，就是点一下，年龄就加一这种，都是很简单的逻辑。然后你就会发现，只有点一定次数之后，图片才会显示。
奉上代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vuetitle>
head>
<body>
<div id="app">
<input type="button" value="年龄点击器" @click="addAge"/>
<input type="button" value="图片切换显示" @click="changeShow"/>
<img v-show="isShow" src="bingdundun.jpg" alt="">
<img v-show="age>=18" src="bingdundun.jpg" alt="">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:15
},
methods:{
changeShow:function () {
this.isShow = !this.isShow;
},
addAge:function () {
++this.age;
}
}
})
script>
body>
html>
另外你会发现还有一个v-if指令，效果实现与v-show差不多，区别就在于：v-show操作的是样式，而v-if操作的是DOM树。一般在实际开发中，若是对于需要频繁切换的元素，使用v-show,否则用v-if.因为操作DOM树对于性能的消耗会比较大。