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異步請求的數據怎樣實時渲染到頁面上？

我是李古拉雷，四年java開發，四年前端加產品，現任職今日頭條前端架構師，終身學習者。聽說熱愛開發，熱愛分享的人都關注了這個微信公衆號【李古拉雷】