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="切換">

這時,我們點擊切換按鈕就會隱藏或者顯示綠色小方塊了