VUE中的 显示与隐藏

在vue中 通过点击事件实现显示与隐藏是非常简单的.

首先我们先整带颜色的一个小方块(div)

如图:　　

 

我们要实现一个点击按钮隐藏或者显示该方块的功能;

首先我们先写一个div:

div id="app">
        <input type="button" value="切换">
    <div style="background-color: aquamarine; width:100px; height: 100px;" ></div>
    </div>

以上代码.我们写了一个大的div id=app(写一个id 为了方便vue与之绑定,当然了 class也可以绑定,但是由于class可以同时存在多个,所有并不推荐).

在div中我们有个按钮(切换);下边是一个长宽皆为100px的绿色小div;

然后我们写script:

var vm = new Vue({
        el:'#app',
        data:{
     
        },
        methods:{
      
            }
        }
    })

这样就绑定到id=app的div上了,

我们知道,在那个绿色小方块的div中写 上vue指令 v-show=true  就可以显示出来,写成v-show=false,就隐藏起来.

还有另外的一种方法,并且更方便于我们操作;

   var vm = new Vue({
        el:'#app',
        data:{
            isShow:true
        }
    })

在data中声明一个值isShow:true;

然后在div中添加上vue指令 v-show

<div style="background-color: aquamarine; width:100px; height: 100px;" v-show="isShow" ></div>

这样我们运行页面,会发现绿色小方块还是显示的;

我们把isShow改成false,就会隐藏,效果是一样的,然后我们在写一个切换显示/隐藏的方法;

这个逻辑就特简单了去一下反就可以了;

 var vm = new Vue({
        el:'#app',
        data:{
            isShow:true
        },
        methods:{
            changeisShow : function(){
                this.isShow = !this.isShow;//取反
            }
        }
    })

这里有一点值得注意,在methods中  我们要怎样获取到id="app"的值呢?

我们在data中声明的值都可以用this. 获取到,前提是在绑定的div内.

方法我们已经写出来了.我们去给input按钮添加上方法就可以了

 <input type="button" @click='changeisShow' value="切换">

这时,我们点击切换按钮就会隐藏或者显示绿色小方块了