vue中v-show 实现上拉下拉菜单

最新推荐文章于 2023-06-09 18:28:07 发布

uyiub

最新推荐文章于 2023-06-09 18:28:07 发布

阅读量956

点赞数 1

本文链接：https://blog.csdn.net/uyiub/article/details/112622713

版权

Vue.js 上拉下拉菜单交互设计 JavaScript 前端开发

关键词由CSDN通过智能技术生成

上拉下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/common.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <style>
  .qw{
      width: 200px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #ccc;
      box-sizing: border-box;
  }
  .qw img{
      width: 20px;
      height: 20px;
  }
  .active{
      background-color: blue;
      border-left:5px solid red ;
  }
  .active1{
      background-color: skyblue;
  }
  .two{
      width: 200px;
      height: 50px;
  }
    </style>

</head>
<body>
    <div id="app">
        <div  v-for="(item,index) in list" >
            <div class="qw flex j-sb a-c" :class="{active:index===num}" @click="num=index">
                <div>{{item.q}}</div>
                <div>
                    <img src="/10VUE/icon/箭头上.png" v-show="index===num?isClick:!isClick"  alt="">
                    <img src="/10VUE/icon/箭头下.png"  v-show="index===num?!isClick:isClick" alt="">
                </div>
            </div>
            <div v-for="(item2,index2) in item.w" class="two" v-show="index===num?isClick:!isClick" @click="num2=index2" :class="{active1:index2===num2}">{{item2}}</div>
        </div>
        
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                isClick:true,
                num:0,
                num2:0,
                list:[
                    {
                        q:"qwe",
                        w:['qqq','www','eee']
                    },
                    {
                        q:"ewq",
                        w:['qqq','www']
                    },
                    {
                        q:"weq",
                        w:['qqq','www','eee','huy','tyu']
                    }
                ]
            }
        })
    </script>
</body>
</html>

效果图
在这里插入图片描述

uyiub

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中v-show 实现上拉下拉菜单

上拉下拉菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/
复制链接

扫一扫