快捷導(dǎo)航

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

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

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

展開(kāi)效果–看紅框區(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ò)程：

分別給展開(kāi)折疊的箭頭加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)展開(kāi)折疊；

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

您可能感興趣的文章:

相關(guān)文章

Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法
今天小編就為大家分享一篇Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
一起來(lái)學(xué)習(xí)Vue的生命周期
這篇文章主要為大家詳細(xì)介紹了Vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
關(guān)于vue-tree-chart簡(jiǎn)單的使用
這篇文章主要介紹了關(guān)于vue-tree-chart簡(jiǎn)單的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue屬性props默認(rèn)類(lèi)型的寫(xiě)法介紹
這篇文章主要介紹了vue屬性props默認(rèn)類(lèi)型的寫(xiě)法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue.js組件間的循環(huán)引用方法示例
組件(Component)是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼。下面這篇文章主要給大家介紹了關(guān)于Vue.js組件間循環(huán)引用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。
2017-12-12
vue實(shí)現(xiàn)提示保存后退出的方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)提示保存后退出的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue中怎樣讓函數(shù)只執(zhí)行一次
這篇文章主要介紹了vue中怎樣讓函數(shù)只執(zhí)行一次問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue封裝DateRangePicker組件流程詳細(xì)介紹
在后端管理項(xiàng)目中使用vue來(lái)進(jìn)行前端項(xiàng)目的開(kāi)發(fā)，但我們都知道Vue實(shí)際上無(wú)法監(jiān)聽(tīng)由第三方插件所引起的數(shù)據(jù)變化。也無(wú)法獲得JQuery這樣的js框架對(duì)元素值的修改的。而日期控件daterangepicker又基于JQuery來(lái)實(shí)現(xiàn)的
2022-11-11
一文帶你了解threejs在vue項(xiàng)目中的基本使用
three.js是一個(gè)用于在Web上創(chuàng)建三維圖形的JavaScript庫(kù),它可以用于創(chuàng)建各種類(lèi)型的三維場(chǎng)景,包括游戲、虛擬現(xiàn)實(shí)、建筑和產(chǎn)品可視化等,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文帶你了解threejs在vue項(xiàng)目中的基本使用,需要的朋友可以參考下
2023-04-04
深入理解vue的使用
這篇文章主要介紹了深入理解vue的使用，對(duì)vue感興趣的同學(xué)，可以參考下
2021-05-05