快捷導(dǎo)航

vue列表單項(xiàng)展開收縮功能之this.$refs的詳解

更新時(shí)間：2019年05月05日 09:26:39 作者：秋秋QY

這篇文章主要介紹了vue列表單項(xiàng)展開收縮功能之this.$refs的詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

展開效果–看紅框區(qū)域

收縮效果–看紅框區(qū)域

接下來(lái)看代碼邏輯

###template部分：已去除與本文不相關(guān)的功能代碼

<li class="main-video"v-for="(item, index) of courseSubList" :key="item.id">
  <div class="audio-name">
    <div class="img-l">
      <span class="img-l-num">{{index+1}}</span>
      <span class="img-l-name">{{item.subName}}</span>
    </div>
    <div class="img-r" @click="showHide(index)" ref="arrow">
      <i class="iconfont">&#xe606;</i>
    </div>
  </div>
  <div class="audio-body" ref="child">
    <div class="body-l">
      <p class="body-l-num body-l-num-video">
        <i class="iconfont">&#xe62e;</i>
      </p>
      <span class="body-l-name">{{item.fileName}}</span>
    </div>
    <div class="body-r">
      <i class="iconfont" @click="deletCourseSub(item.id)">&#xe62c;</i>
    </div>
  </div>
</li>

###js部分：已去除與本文不相關(guān)的功能代碼

data() {
	return {
		courseSubList: [], // 課程正文列表
	}
},
methods: {
  showHide(index) {
   if (this.$refs.child[index].style.display === 'none') {
    this.$refs.child[index].style.display = 'flex'
    this.$refs.arrow[index].style.transform = 'rotateX(0deg)'
   } else {
    this.$refs.child[index].style.display = 'none'
    this.$refs.arrow[index].style.transform = 'rotateX(180deg)'
   }
  },
  deletCourseSub(id) {
	  // 功能代碼省略
  }
}

###分析過(guò)程：

分別給展開折疊的箭頭加ref="arrow"屬性；
分別給列表單項(xiàng)內(nèi)容區(qū)最外層標(biāo)簽即本文的class="audio-body"的標(biāo)簽加ref=“child”;
再給箭頭標(biāo)簽區(qū)域加個(gè)showHide(index)事件;
最后通過(guò)對(duì)應(yīng)的index利用vue的ref屬性改變對(duì)應(yīng)的列表單項(xiàng)展開折疊；

以上所述是小編給大家介紹的vue列表單項(xiàng)展開收縮功能之this.$refs詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue3應(yīng)用elementPlus table并滾動(dòng)顯示問(wèn)題
這篇文章主要介紹了vue3應(yīng)用elementPlus table并滾動(dòng)顯示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定
這篇文章主要介紹了vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì) ,需要的朋友可以參考下
2018-09-09
Vue.js中this如何取到data和method里的屬性詳解
methods屬性是一個(gè)對(duì)象,通常我們會(huì)在這個(gè)對(duì)象中定義很多的方法,下面這篇文章主要給大家介紹了關(guān)于Vue.js中this如何取到data和method里的屬性,需要的朋友可以參考下
2022-12-12
Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟
寫后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
vue el-table實(shí)現(xiàn)多選框回填的示例代碼
摘要：Vue多選框回填是實(shí)現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實(shí)現(xiàn)多選框回填的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
淺析從面向?qū)ο笏季S理解Vue組件
用面向?qū)ο蟮乃季S去理解Vue組件，可以將所有的事物都抽象為對(duì)象，而類或者說(shuō)是組件，都具有屬性和操作。這篇文章主要介紹了嘗試用面向?qū)ο笏季S理解Vue組件,需要的朋友可以參考下
2021-07-07
vue+iview+less+echarts實(shí)戰(zhàn)項(xiàng)目總結(jié)
本篇文章是作者通過(guò)學(xué)習(xí)vue+iview+less+echarts制作一個(gè)小系統(tǒng)后，做的心得以及遇到的坑的總結(jié)，值得大家學(xué)習(xí)參考。
2018-02-02
Vue.js中的計(jì)算屬性、監(jiān)視屬性與生命周期詳解
最近在學(xué)習(xí)vue,學(xué)習(xí)中遇到了一些感覺挺重要的知識(shí)點(diǎn),感覺有必要整理下來(lái),這篇文章主要給大家介紹了關(guān)于Vue.js中計(jì)算屬性、監(jiān)視屬性與生命周期的相關(guān)資料,需要的朋友可以參考下
2021-06-06
Vue動(dòng)態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問(wèn)題的解決
這篇文章主要介紹了Vue動(dòng)態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問(wèn)題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07