vue2.0 可折疊列表 v-for循環(huán)展示的實例

發(fā)布時間：2020-10-17 00:10:08 來源：腳本之家閱讀：309 作者：qq_27717857 欄目：web開發(fā)

先上一張效果圖：

以前用angularjs操作基本上都是要取到每個列表的id再循環(huán)判斷是不是當(dāng)前點擊的列表來顯示折疊。

今天在這個項目 https://github.com/IFmiss/vue-music 上看到操作很簡單，并沒有如此復(fù)雜。趕緊記錄一下：

折疊列表單獨做一個組件，圖標(biāo)是用的iconfont中生成的css鏈接：myMusicSheetList.vue

<template>
 <div class="sheet-list">
 <div class="sheet-header" @click="toggleSheet">
 <i class="icon iconfont icon-enter" ref="toggleicon"></i>
 <span class="sheet-header-span">{{data_item.name}} <span> ({{data_item.num}}) </span></span>
 <i class="sheet-header-i icon iconfont icon-setup" @click.stop="showSheetMenu(data_item.name)"></i>
 </div>

 <div v-if="showSheets" class="sheet-content" v-for="i in data_item.details">
 <div class="sheet-content-image">
 <img :src="i.details_image" width="50" height="50" >
 </div>
 <div class="sheet-content-middle">
 <p >{{i.details_name}}</p>
 <p >{{i.details_num}}首歌曲</p>
 </div>
 <i class="icon iconfont icon-switch" @click.stop="showSheetMenu()"></i>
 </div>
 </div>
</template>

<script>
export default {
 components:{},
 props: {
 item:{
 type:Object
 }
 },
 data(){
 return{
 showSheets:false,
 data_item:{}
 }
 },
 methods:{

//向右的小圖標(biāo)動畫
 toggleSheet:function(index){
 console.log(this.$refs);
 this.$refs.toggleicon.style.transform = !this.showSheets ? 'rotate(90deg)' : 'rotate(0)'
this.showSheets = !this.showSheets
 },
 showSheetMenu:function(){
 alert(1111);
 }
 },
 created(){
 this.data_item = this.item;
 },
}
</script>

<style scoped>
.sheet-list{
clear: both;
}
.sheet-header{
height: 30px;background: #e5e5e5;position: relative;
}
.sheet-header i:nth-child(1){
line-height: 30px;position:absolute;
left:10px;
color:#666;
transition:all 0.5s;
}
.sheet-header-i{
line-height: 30px;position: absolute;right: 10px;
}
.sheet-header-span{
left: 40px;font-size: 14px;position:absolute;line-height: 30px;
}
.sheet-content{
position: relative;width: 100%;display: flex;
}
.sheet-content i{
font-size: 26px;position: absolute;right: 10px;top: 50%;transform:translate(0,-50%);
}
.sheet-content-image{
width: 60px;float: left;text-align: center;
}
.sheet-content-middle{
position: relative;width: 100%;border-bottom: 1px solid #e5e5e5;padding-bottom: 10px;margin-top: 10px;margin-left: 10px;
}
.sheet-content-middle p{
font-size: 16px;width: 70%;color: #666;text-overflow:ellipsis;white-space: nowrap;overflow:hidden;
}
</style>

主頁面調(diào)用組件：home.vue

<template>
 <div class="home">

<sheet-list v-for="(item,index) in sheetList" :item="item"></sheet-list>
 </div>
</template>

<script>

import myMusicSheetList from './../../components/myMusicSheetList.vue'

export default {
 components:{'sheet-list':myMusicSheetList},
 data () {
 return {
 sheetList:[{
 id:1,
 name:'我創(chuàng)建的歌單',
 num:2,
 details:[{
 details_id:1,
 details_name:'我喜歡的音樂',
 details_num:30,
 details_image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521191038714&di=117b8f1d83605767e8a7faf01cb9be9b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8435e5dde71190efc4376916c41b9d16fcfa602f.jpg'
 },{
 details_id:2,
 details_name:'在歐洲田園般的鄉(xiāng)村上騎單車',
 details_num:15,
 details_image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521190642670&di=67822ec270160c1fb21e67d49e95a97f&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130615%2F2861027_140302450156_2.jpg'
 }]
 },{
 id:2,
 name:'我收藏的歌單',
 num:2,
 details:[{
 details_id:1,
 details_name:'這應(yīng)該是你比較喜歡聽的歌曲了',
 details_num:10,
 details_image:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3679981803,1758706610&fm=27&gp=0.jpg'
 },{
 details_id:2,
 details_name:'歐美風(fēng)格的音樂，安靜的聽',
 details_num:2,
 details_image:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2406805917,4090912031&fm=27&gp=0.jpg'
 }]
 }]
 }
 },
 methods: {
 
 },
 mounted:function(){
 
 }
}
</script>
<style scoped>
</style>

如果不能運(yùn)行請檢查import 路徑是否正確。

以上這篇vue2.0 可折疊列表 v-for循環(huán)展示的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue2.0 可折疊列表 v-for循環(huán)展示的實例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽