前端數(shù)據(jù)列表展開(kāi)折疊功能

思路
1.定義一個(gè)數(shù)組來(lái)存放所有列表的狀態(tài)值
var recFlag
2.在列表對(duì)象中根據(jù)該對(duì)象的長(zhǎng)度循環(huán)放入每個(gè)列表的狀態(tài)值 最后push到之前定義的數(shù)組中
for (var i = 0; i < this.recruitmentPosList.length; i++) {
var obj = {show: false}
this.recFlag.push(obj)
}

3.定義函數(shù)來(lái)改變狀態(tài)值
handShow (index) {
console.log()
this.recFlag[index].show = !this.recFlag[index].show
}

4.在頁(yè)面中 循環(huán)列表內(nèi)調(diào)用該函數(shù) 傳入索引值

5.根據(jù)v-show="recFlag[index].show"的狀態(tài)來(lái)顯示或隱藏列表內(nèi)容

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,878評(píng)論 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,861評(píng)論 1 45
  • 工廠模式類(lèi)似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 8,140評(píng)論 2 17
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁(yè)的形式展示給用戶(hù)的,因此網(wǎng)頁(yè)是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁(yè)文件是用...
    阿啊阿吖丁閱讀 4,975評(píng)論 0 0
  • 換了新手機(jī),想找個(gè)星空的壁紙,從相冊(cè)的最后翻到最前,壁紙沒(méi)挑好,回憶卻在時(shí)間的縫隙里翻涌著。 兜兜轉(zhuǎn)轉(zhuǎn),手機(jī)換了無(wú)...
    清越SAMA閱讀 230評(píng)論 0 0

友情鏈接更多精彩內(nèi)容