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:;
}
.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 点击下拉框的更多相关文章
- 微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone)
微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone) 前言: 这是小菜博客的第三篇文章.一直认为自己可以表达的东西太过简单,难以上台面,总是吝啬地不肯写.就算是写,也不知道从何开始.在同事的 ...
- [Selenium]点击下拉框之后,从下拉列表选择元素进行点击很容易失败
点击下拉框之后,下拉列表会显示出来,但是有时候下拉列表会很快就消失掉,导致后面选择元素的时候会失败. 像这种情况,需要将鼠标移动到下拉列表上,使下拉列表维持显示,然后才选择元素进行点击. 将鼠标移动到 ...
- Vue实现树形下拉框
Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索.多选.延迟加载.异步搜索.排序,自定义.Vuex支持等等.这 ...
- vue js select下拉框
<template> <ul id="select"> <li> <div class="select-head"&g ...
- vue实现百度下拉框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
- vue自定义下拉框组件
创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...
- 点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
- 点击select下拉框,触发事件
<div class="controls moneycheck floatleft"> <select class="span12 chosen_cat ...
随机推荐
- uoj#388. 【UNR #3】配对树(线段树合并)
传送门 先考虑一个贪心,对于一条边来说,如果当前这个序列中在它的子树中的元素个数为奇数个,那么这条边就会被一组匹配经过,否则就不会 考虑反证法,如果在这条边两边的元素个数都是偶数,那么至少有两组匹配经 ...
- JAVA接口详细讲解
接口 接口的概念 接口代表的是一个功能的集合,定义规范,所有的方法都是抽像方法,这是一种思想是一种规则,将这个种规则称为接口. 接口的定义 使用关键字 interface 叫做接口 修饰符 inte ...
- Spring IOC 的源码分析
刚学习Spring的时候,印象最深的就是 DispatcherServlet,所谓的中央调度器,我也尝试从这个万能胶这里找到入口 configureAndRefreshWebApplicationCo ...
- 进击JavaScript核心 --- (1)基本数据类型
ES5之前提供了 5种基本数据类型 和 1种引用数据类型 基本数据类型:Undefined, Null, String, Number, Boolean 引用数据类型:Object ES6开始引入了一 ...
- SonarQube总结
官网:https://www.sonarqube.org/ 一款代码质量管理开源平台.
- STP-12-MST工作原理
MST将网络划分为一或多个区域.一个MST区域是一组以相同方式共同使用MST的交换机——除了其他特性外,它们运行相同数量的MST实例,并在这些实例上映射相同的VLAN集合. 例如,在下图中,工程师定义 ...
- 题解 poj1845 Sumdiv (数论) (分治)
传送门 大意:求A^B的所有因子之和,并对其取模 9901再输出 (这题又调了半天,把n和项数弄混了QAQ) 根据算数基本定理:A=(p1^k1)*(p2^k2)*(p3^k3)*...*(pn^kn ...
- 2019-CCPC广东省赛总结
2018年11月第一次参加ICPC区域赛青岛赛区,打铁了! 2019年5月第一次参加CCPC广东省赛,4题滚粗,C题莫队TLE13发,只拿了个铜牌! 教训总结: 比赛时千万不能犹豫,不能犹豫,不能犹豫 ...
- python HTTP 状态码
404 Not Found 在HTTP请求的路径无法匹配任何RequestHandler类相对应的模式时返回404(Not Found)响应码. 400 Bad Request 如果你调用了一个没有默 ...
- spring和springmvc是单例还是多例
这么说其实不规范 spring的bean 默认是单例 springmvc的controller 默认是单例 所以最好不要在controller里定义成员变量 都可通过注解 @scope=p ...