本代碼實現的功能：可動態添加里面的任何一級別的代碼（不固定級別）
html代碼：

<div class="hx-bigListOne"><div class="hx-bigLiOne" v-for="item in items" :key="item.id"><h5 class="hx-OneTit" @click="toggle(item)">{{item.title}}</h5><div v-show="item.show" class="hx-bigListTwo"><div class="hx-bigLiTwo" v-for="li in item.data" :key="li.id"><div class="hx-smaD"><div style="width:80px;height:80px"></div><span style="font-size:12px">{{li.text}}</span></div></div></div></div></div> </div>

js代碼：

data: function() {
return {
items: [
{
title: “劃傷類型”,
data: [
{ text: “this is a text” },
{ text: “this is a text” },
{ text: “this is a text” }
],
show: false
},
{
title: “磕傷類型”,
data: [
{ text: “this is a text” },
{ text: “this is a text” },
{ text: “this is a text” }
],
show: false
},
{
title: “其他類型”,
data: [
{ text: “this is a text” },
{ text: “this is a text” },
{ text: “this is a text” }
],
show: false
}
],
}}
methods: {
toggle(item) {
if(item.data.length!=0){
item.show = !item.show;
}else{
item.show = item.show;
}
},
}

css代碼：

.hx-bigListOne {
margin-left: 30px;
}
.hx-bigLiOne {
margin: 0 30px 10px 0;
height: auto;
}
.hx-OneTit {
width: 150px;
height: 30px;
font-size: 20px;
line-height: 30px;
}
.hx-bigListTwo {
height: 110px;
}
.hx-bigLiTwo {
float: left;
}
.hx-smaD {
width: 110px;
margin: 10px 15px;
}

實現的效果：

總結

以上是生活随笔為你收集整理的vue实现点击标题，显示隐藏兄弟元素（类似电脑打印设备显示打印设备）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。