v-show与v-if指令

v-show指令与v-if指令都可以用在文本与图片上上，两者使用方法一致，该文以v-show方法为例子

show用在频繁切换到元素上，if用在切换不频繁的元素上。切换频繁对性能要求大

导入CDN，常规建立一个id选择器并准备好图片

<div id="app">
        
        <input type="button" value="切换显示" @click="changeIsShow"> 
        <!--点击以下就变换“isShow”的布尔值，达到变换图片显示的作用即控制“display”样式-->
        <img v-show="isShow" src="图片路径" alt="">
        <!--false使图片消失，ture使出现，默认ture-->           
    </div>

　　此处承接了一个名叫“isShow”的方法，“script”标签处

<script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow: false
            },
            methods:{
                changeIsShow: function(){
                this.isShow = !this.isShow; //变换数值，让它取反值
                }        
        })
    </script>

如代码所示点击按钮就可以控制图片显示的布尔值，一次达到控制图片的“display”属性。如果想通过点击次数来控制图片的显隐，则需要一个整形变量作为控制的数值，在“data”中增加一个变量“num”。并赋一个值，然后在“methods”里增加一个函数取名为“add”（名随意）然后在这个函数里设置增加“num”的值

add:function(){
                    this.num++;
                }

 

然后再“div”标签中添加一个按钮，与“add”函数连接

<input type="button" value="增加num值" @click="add">

然后再插入一个图片，设置图片出现的条件：num>=n,

<img v-show="num>=n" src="图片路径" alt="">

这样在运行后每点击一次“增加num值”的按钮，num的值就会增肌，知道达到条件就可以显示图片了，让图片消失的方法只需要将函数中的自增性质该为自减即可