背景介紹jQuery中有個toggle()方法,可以切換元素的顯示狀態,在用vue時如果不引入jQuery如何實現這種效果?使用場景常見有三種場景:1.控制頁面中一個dom元素2.控制頁面中多個dom元素3.控制頁面中的dom元素是從服務端返回,且有多個技術分析1.一二場景下實現這種效果可以用v-i ...
背景介紹
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非同步請求的數據怎樣實時渲染到頁面上?