vue 点击下拉框

Posted 2021-01-25 chen527

 data: {

        hide:false,
        zhi:"全部"

    },

<div class="item">
   <div class="c2c-all" @click="hide ? hide=false : hide=true">
        <span class="c2c-alla" style="position: relative">{{zhi}}</span><span><div class="coinbig-c2c-sanj fsj"></div></span>
   </div>
   <div class="c2c-son c2sleft" v-show="hide" >
   　　<div @click="hide=false" class="c2c-as"v-for="item in 6,">{{item++}}</div> //循环6 个  data里可以造点数据    zhi=item   为点击那个值赋值给全部
   </div>
</div>

/*下拉开始*/
        
        .assetrecords .c2c-all {
            width: 100%;
            /*height: 32px;*/
            display: block;
            position: relative;
        }
        
        .assetrecords .item {
            width: 160px;
            height: 32px;
            background: #202e58;
            line-height: 32px;
            /*border-left: 1px solid #2a404f;*/
            cursor: pointer;
            border: 1px solid #495d9a;
            border-radius: 3px;
        }
        
        .assetrecords .c2c-alla {
            margin-left: 10px;
            font-size: 14px;
            color: #d6ddff;
        }
        
        .assetrecords .c2c-as {
            padding-left: 10px;
            font-size: 14px;
            color: #FFFFFF
        }
        
        .assetrecords .c2c-as:hover {
            background: #495689;
        }
        
        .assetrecords .c2c-son {
            display: none;
            background-color: #15284c;
            width: 160px;
            position: absolute;
            top: 32px;
            z-index: 1;
        }
        
        .assetrecords .item {
            position: relative;
        }
        
        .assetrecords .coinbig-c2c-sanj {
            width: 0;
            height: 0;
            border-width: 7px;
            border-style: solid;
            border-color: #ffffff transparent transparent transparent;
            background: #202e58;
            position: absolute;
            right: 9px;
            top: 13px;
        }
        
        .assetrecords .coinbig-c2c-sanj-shang {
            width: 0;
            height: 0;
            border-width: 7px;
            border-style: solid;
            border-color: #ffffff transparent transparent transparent;
            background: #12212f;
            position: absolute;
            right: 9px;
            top: 16px;
        }
        
        .assetrecords .c2c-son-input {
            width: 150px;
            height: 32px;
            line-height: 30px;
            border: 1px solid #495d9a;
            margin: 5px auto 0;
        }
        
        .assetrecords .c2c-son-input-les {
            float: right;
            width: 12px;
            height: 12px;
            margin-top: 11px;
            margin-right: 5px;
        }
        
        .assetrecords .c2c-son-inputs {
            width: 110px;
            height: 100%;
            padding-left: 10px;
            background: #15284c;
            border: none;
            color: #FFFFFF;
            font-size: 14px;
        }
        /*下拉结束*/