功能如下：

这里就需要一开始只显示6个数据，点击展开才显示全部

超文本标记语言里调用显示详细列表：

showdetailList"span { { item。title } }/span span { { item }。name } }/span/p/div v v-if=' detail list。长度6 ' v-: click=' changeFoldState ' span { { brandFold？'展开':'收起}}/span /divdata数据：

data(){返回{ brandfold : true } }莫克一个数据：

mocData(){ var items=[' Dr . Ci : labo城野医生', '日本', '控油收敛毛孔', '任何肤质', '面部', '化妆水', '任何肤质', '面部', '化妆水]var list=['商品品牌', '品牌国', '功能', '适合肤质', '适用部位', '产品类型', '商品品牌', '品牌国', '功能]为(var I=0；一。项目。长度；I){让项={ title : list[I]，name : item[I]}这个。详细列表。push(item)}控制台。日志(这个。detaillist)}使用计算属性：

设置方法里的英国压力单位值就是得到方法返回的值

computed : { showdetaillist : { get : function(){ if(this。brandfold){ if(this。详细列表。长度7){返回这个。detaillist }让newArr=[]for(var I=0；i6；I){让项目=这个。详细列表[I]newArr。push(item)} return newArr }退回这个。detaillist }，设置：函数(val){ this。showdetaillist=val } } } ChangeFoldState方法：

changeFoldState(){ this。brandfold=！this.brandFold}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。