vue實現 toggle顯示隱藏效果

背景介紹
jQuery中有個toggle()方法，可以切換元素的顯示狀態，在用vue時如果不引入jQuery如何實現這種效果？
使用場景
常見有三種場景：
1.控制頁面中一個dom元素
2.控制頁面中多個dom元素
3.控制頁面中的dom元素是從服務端返回，且有多個
技術分析
1.一二場景下實現這種效果可以用v-if指令，通過設置true或false來控制dom的隱藏與顯示。如果控制一個dom或多個dom我們可以在data中定義對應的flag，每次點擊事件發生時 flag=!flag ，來切換flag的值。這樣點擊的dom可以做的顯示或隱藏切換。
2.第一和第二種場景比較簡單按照上述方式可以實現，第三種場景用這種方法就不行了，因為我們不知道會從服務端返回幾個dom，所以也就不能具體的定義控制dom的flag變數。這種情況下要怎麼實現點擊從用服務端返回的數據渲染成的dom，來達到卻換隱藏和顯示效果？
實現方法
實現第三種場景可以用Vue.set()方法。具體實現方式如下：
1.第一步先定義一個data對象來接收從服務端返回的數據

data(){
　　return {
　　　　listAll:{}
　　}
}

2.先定義個toggleShow()方法：

methods: {
　　toggleShow(index){
　　　　let obj = this.listAll[index]; // 找到點擊的dom對象
　　　　obj.hide = !obj.hide; // 向這個對象中添加 hide 屬性
　　　　this.$set(this.listAll, index, obj); // 把添加完hide 屬性的新對象set()進data數據中
　　}
}

3.在標簽模板中調用toggleShow()方法

<div v-for="(item, index) in listAll" :key="index">
　　<card @click.native="toggleShow(index)">
</card>
<div v-if="item.hide ? true:false">
　　// 顯示或隱藏區域
</div>
</div>

歸納總結

實現這種需要有兩種方式
1.在data中定義固定的flag值，根據用切換flag值的方式來達到切換dom的顯示或隱藏
2.使用Vue.set()方法，在非同步請求會的數據中添加臨時hide屬性，來控制點擊的dom元素隱藏或顯示
如果不知道如何把從服務端接收的數據實時渲染的頁面中，可以翻看這篇文章：
vue非同步請求的數據怎樣實時渲染到頁面上？