展开收起最后一项的内容,展开收起的图标和信息改变
每次只能展开一个,点击第二个先收起第一个再展开第二个(类似手风琴)
HTML代码
<div class="content" v-for="(t,index) in List" :key="t.id">
<div class="desc">
<span
class="btn"
:style="{'color': (thisIndex===index? '#0195ff':'#999999')}"
@click="show(index)"
>{{thisIndex===index ? '收起' : '展开'}}</span>
<i
:class="thisIndex===index?'el-icon-d-arrow-left':'el-icon-d-arrow-right'"
:style="{'color': (thisIndex===index? '#0195ff':'#999999')}"
></i>
<div class="content" v-show="thisIndex===index">{{t.content}}</div>
</div>
</div>
javasript
data中声明要循环的数据、当前的下标(string类型)
data() {
return{
thisIndex: null,
List:[]
}
},
methods: {
open(index) {
if(this.thisIndex==null){
this.thisIndex=index
}else{
this.thisIndex=null
}
}
}
可以同时展开多个各个互不影响
data中声明要循环的数据、当前的下标数组类型(array)
思路:判断当年下标是否在数组下标中来控制展开收起,不存在就将该下标加入数组,再点击一次这个下标则删去,数组中无该下标就显示收起。
HTML文章来源:https://www.toymoban.com/news/detail-532088.html
<div class="content" v-for="(t,index) in List" :key="t.id">
<div class="desc">
<span
class="btn"
:style="{'color': (thisIndex.indexOf (index)!=-1? '#0195ff':'#999999')}"
@click="show(index)"
>{{thisIndex.indexOf (index)!=-1 ? '收起' : '展开'}}</span>
<i
:class="thisIndex.indexOf (index)!=-1?'el-icon-d-arrow-left':'el-icon-d-arrow-right'"
:style="{'color': (thisIndex.indexOf (index)!=-1? '#0195ff':'#999999')}"
></i>
<div class="content" v-show="thisIndex.indexOf (index)!=-1">{{t.content}}</div>
</div>
</div>
js文章来源地址https://www.toymoban.com/news/detail-532088.html
data() {
return{
List:[],
thisIndex: []
}
},
methods: {
show(index) {
if(this.thisIndex.indexOf(index) == -1){
this.thisIndex.push(index)
}else{
this.thisIndex = this.thisIndex.filter(item => item != index)
}
}
}
到了这里,关于[vue]v-for循环出的列表如何实现每一项单独展开收起的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!