vue 点击下拉框
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; } /*下拉结束*/