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:;
} .assetrecords .item {
position: relative;
} .assetrecords .coinbig-c2c-sanj {
width:;
height:;
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:;
height:;
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 点击下拉框的更多相关文章

  1. 微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone)

    微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone) 前言: 这是小菜博客的第三篇文章.一直认为自己可以表达的东西太过简单,难以上台面,总是吝啬地不肯写.就算是写,也不知道从何开始.在同事的 ...

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

    点击下拉框之后,下拉列表会显示出来,但是有时候下拉列表会很快就消失掉,导致后面选择元素的时候会失败. 像这种情况,需要将鼠标移动到下拉列表上,使下拉列表维持显示,然后才选择元素进行点击. 将鼠标移动到 ...

  3. Vue实现树形下拉框

    Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索.多选.延迟加载.异步搜索.排序,自定义.Vuex支持等等.这 ...

  4. vue js select下拉框

    <template> <ul id="select"> <li> <div class="select-head"&g ...

  5. vue实现百度下拉框

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. vue获取下拉框值

    vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...

  7. vue自定义下拉框组件

    创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...

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

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  9. 点击select下拉框,触发事件

    <div class="controls moneycheck floatleft"> <select class="span12 chosen_cat ...

随机推荐

  1. append、replace、replaceAll、indexof、lastIndexOf、substring的用法

    1.append StringBuffer buf = new StringBuffer("Hard "): String  aString  =  "Waxworks& ...

  2. linux bg和fg命令

    linux下我们如果想一个任务或者程序还后台执行可以使用&,实际上linux还提供了其他任务调度的命令. bg将一个在后台暂停的命令,变成继续执行 fg将后台中的命令调至前台继续运行 jobs ...

  3. 3分钟简单了解 prototype 和 __proto__

    关于prototype 1. 所有的函数都会有一个prototype属性,属性值是一个普通对象: 2. 当我们去new一个构造函数的实例时,构造函数的原型对象(prototype)会被赋值给它实例的[ ...

  4. 【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目

    1. 安装node.js, Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 这次node.js不是主角,默认已安装好了,通过npm –v查看no ...

  5. Mysql 5.7主主复制配置

    MySQL5.7主主复制配置 主机1IP:192.168.1.2主机2IP:192.168.1.4 一.首先安装MySQL 5.71.卸载两台主机系统中已经有的mysql相关软件包rpm -qa | ...

  6. 维护gcd的线段树 补发一波。。。

    基础线段树(辣鸡的不行) 发现自己线段树除了会维护加法和乘法就啥也不会了QWQ太菜了 瞎写了一个维护gcd的 首先,gcd(x,y)= gcd(x,y-x) 并且很容易推广到n个数,所以我们可以把原数 ...

  7. Token认证登录以及权限控制

    IdentityServer4实现Token认证登录以及权限控制   相关知识点 不再对IdentityServer4做相关介绍,博客园上已经有人出了相关的系列文章,不了解的可以看一下: 蟋蟀大神的: ...

  8. 043 Multiply Strings 字符串相乘

    给定两个以字符串表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积.注意:    num1 和 num2 的长度均小于110.    num1 和 num2 均只包含数字 0 ...

  9. 《深入理解java虚拟机》笔记(4)对象已死吗

    一.垃圾回收器回收的对象 虚拟机内存区域中程序计数器.虚拟机栈.本地方法栈随线程而生,随线程而灭.这3个区域内存分配和回收都具备确定性.因此不需要过多考虑回收问题. 而Java堆和方法区不一样,这部分 ...

  10. 2017年3月14日-----------乱码新手自学.net 之Authorize特性与Forms身份验证(登陆验证、授权小实例)

    有段时间没写博客了,最近工作比较忙,能敲代码的时间也不多. 我一直有一个想法,想给单位免费做点小软件,一切思路都想好了,但是卡在一个非常基础的问题上:登陆与授权. 为此,我看了很多关于微软提供的Ide ...