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

原文地址:https://www.cnblogs.com/chen527/p/10072672.html

时间: 2024-10-12 05:50:14

vue 点击下拉框的相关文章

[Selenium]点击下拉框之后,从下拉列表选择元素进行点击很容易失败

点击下拉框之后,下拉列表会显示出来,但是有时候下拉列表会很快就消失掉,导致后面选择元素的时候会失败. 像这种情况,需要将鼠标移动到下拉列表上,使下拉列表维持显示,然后才选择元素进行点击. 将鼠标移动到下拉列表上,有时候只要提供整个下拉列表的Dom结构就可以,有时候下拉列表很长,这种方式也会失败. 后来采用计算下拉列表的大小,给一点偏移量来进行移动,比较好使. /** * Click drop down control of Asset Class Set in Asset Class Selec

js实现点击下拉框选中对应的div

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现点击下拉框选中对应的div</title> <style type="text/css"> div{display:none;} </style> </head> <body> <select name="

Vue实现树形下拉框

Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索.多选.延迟加载.异步搜索.排序,自定义.Vuex支持等等.这些功能在官网上都有详细的介绍: vue-treeselect官网: vue-treeselect vue-treeselect github地址: vue-treeselect 下面只做个简单的功能介绍,模糊搜索与树形结构展示: 当然,首先是下载安装插件: npm install --save @r

vue的select 下拉框某一项设置为不可选

select下拉框中某一项不可选置灰 一, html <div class="sale"> <select @change="GetCountyData()"> <option>请选择</option> <option v-for="(item,index) in data" :disabled="item.is_true==1?true:false" :class=&qu

vue获取下拉框值

vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: <!-- 下拉框 --> <div v-show="moreStore" class="select"> <select class="choice" v-on:change="indexSelect" v-

点击自定义下拉框以外的区域关闭下拉框

1.写一个下拉框 html部分: <div class="pull-left service-type mt-36"> <div id="currentService">第一<img style="margin-left: 5px" src="arrow.png"/></div> <ul class="service-option hidden">

点击select下拉框获取option的属性值

select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下,结果一运行悲催了,怎么点击option事件就是不会执行.这是为什么呢,刚开始也不懂,之前没遇到过这样的需求,后来经过学习,才恍然大悟,原来select option没有点击事件,要想获得所选option的属性值,需要通过jquery的change()方法来获取,下面通过代码解释一下,代码如下: <

自定义控件基础01_菜单轮__viewPager_下拉框_自定义开关

1,自定义控件分类: 1.1组合控件:由安卓中原生的控件组合起来,配合动画达成的效果 1.2自定义控件 1.3组合控件案例演示: 案例:优酷菜单demo 三层圆环,按下menu键会通过动画效果消失在界面,点击小房子和中层圆环,最外层圆环消失 ①布局实现: 三层相对布局相互叠加(因为图片背景是透明的,所以可以叠加显示) 由于三个布局是叠加显示的,所以这个菜单选项要使用一个占据焦点比较强的(不然有可能点击不到)ImageButton控件 控件上background=”@android:color/t

selenium处理select标签的下拉框

有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select id="status" class="form-control valid" onchange="" name="status"> <option value=""></option&g