vue | vue實現列表同時展開與單獨展開
阿新 • • 發佈:2018-08-17
bsp span lag 用戶 表示 cli 展開 active cti
需求:每個li標簽在點擊的時候,都同時展開。
但是碰見幾個問題:
1、如果點第一個li 所有li都會展開;
2、點擊第一個li,第一個li展開,點擊第二個li,第一個li閉合,第二個li展開
這兩種情況都與預期不符,我們要求,點擊第一個li展開,點擊第二個li第一個li不閉合,第二個li展開,依次類推。
1、2是使用了v-show="activeIndex==index"導致的,因為數據是v-for遍歷的,而activeIndex不是每個li私有的,是每個li公用的。
那麽問題來了,如何解決呢?
說到私有,那就要用v-for=“(item,index) in arr” 中index去表示私有,使用:ref="index"去表示用戶點擊是當前的li。
html
<div id="demo" > <ul> <li v-for="(item,index) in arr" @click="clickItem(index)" :ref="index"> {{item}} <p style="display: none">123</p> </li> </ul> </div>
vue
new Vue({ el: "#demo", data: { flag:true, arr:["和","啊","嗯","哦"], }, methods:{ clickItem(index){ if (this.$refs[index][0].childNodes[1].style.display=="none") {this.$refs[index][0].childNodes[1].style.display="block" }else if (this.$refs[index][0].childNodes[1].style.display=="block") { this.$refs[index][0].childNodes[1].style.display="none" } console.log(this.$refs[index][0].childNodes[1].style.display); } } })
這樣就能實現每個li標簽在點擊的時候,可同時展開的效果了。
///////////////////////////////////////////////////////////////////////
順便寫一下點擊第一個li,第一個li展開,點擊第二個li,第一個li閉合,第二個li展開的代碼
html
<div id="demo"> <ul> <li v-for="(item,index) in arr" @click="clickItem(index)"> {{item}} <p v-show="index==limit">123</p> </li> </ul> </div>
css
new Vue({ el: "#demo", data: { limit:-1, arr:[1,2,3,4] }, methods:{ clickItem(index){ if (index==this.limit) { this.limit=-1 }else{ this.limit=index; } } } })
vue | vue實現列表同時展開與單獨展開