1. 程式人生 > >vue 點擊下拉框

vue 點擊下拉框

width v-for 下拉 puts play item padding block posit

 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; } /*下拉結束*/

vue 點擊下拉框