vue实现点击标题，显示隐藏兄弟元素（类似电脑打印设备显示打印设备）

最新推荐文章于 2024-01-18 10:25:56 发布

热心市民小胖纸

最新推荐文章于 2024-01-18 10:25:56 发布

阅读量1.6k

点赞数 1

分类专栏：工具使用方法 vue 鼠标事件文章标签： vue的动态添加两级联动类似电脑打印设备的功能前端代码

本文链接：https://blog.csdn.net/weixin_38242293/article/details/83787358

版权

工具使用方法同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

17 篇文章 0 订阅

订阅专栏

鼠标事件

8 篇文章 0 订阅

订阅专栏

本代码实现的功能：可动态添加里面的任何一级别的代码（不固定级别）
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;
}