效果图
代码块
< div> < span v- for = "(item,index) in showHandleList" : key= "item.index" > < span> { { item. emailFrom} } < / span> < / span> < span v- if = "this.list.length > 4" @click= "showAll = !showAll" > { { word} } < / span> < / div>
data ( ) { return { list : [ { emailFrom : '利晴天<liqingtian@163.com>' } , { emailFrom : '利晴天<liqingtian@163.com>' } , { emailFrom : '利晴天<liqingtian@163.com>' } , { emailFrom : '利晴天<liqingtian@163.com>' } , { emailFrom : '利晴天<liqingtian@163.com>' } , { emailFrom : '利晴天<liqingtian@163.com>' } , { emailFrom : '利晴天<liqingtian@163.com>' } , { emailFrom : '利晴天<liqingtian@163.com>' } , { emailFrom : '利晴天<liqingtian@163.com>' } , { emailFrom : '利晴天<liqingtian@163.com>' } ] , showAll : false } } , computed : { showHandleList ( ) { if ( this . showAll == false ) { var showList = [ ] ; if ( this . list. length > 4 ) { for ( var i = 0 ; i < 4 ; i++ ) { showList. push ( this . list[ i] ) } } else { showList = this . list; } return showList; } else { return this . list; } } , word ( ) { if ( this . showAll == false ) { return '展开' } else { return '收起' } } } ,