zoukankan      html  css  js  c++  java
  • 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;
            }
            /*下拉结束*/
  • 相关阅读:
    What is EJB
    Redis连接工具类
    MyBatis单列工厂的实现
    TCP和UDP的区别(Socket)
    webSocket协议与Socket的区别
    OSI七层模型
    Http协议和HTTPS协议
    Cookie和Session
    Request库使用response.text返回乱码问题
    Selenium元素定位问题
  • 原文地址:https://www.cnblogs.com/chen527/p/10072672.html
Copyright © 2011-2022 走看看