标签：for循环 size 获取值 mod 下拉 block lis put round
原生的下拉框用vue获取值双向绑定简直不要太好用，Duang的一下就行了
<div id="datePrice"> <select v-model="selected" id="dataSel" class="dataSel" v-on:change="change"> <option v-for="item in dateList" v-bind:value="item.date" v-text="item.date"></option> </select> </div>
js:
var VMdate=new Vue({ el:‘#datePrice‘, data:{ selected:‘请选择日期‘, serviceType:0, dateList:[ {‘date‘:‘2016-11‘ }, {‘date‘:‘2016-10‘ }, {‘date‘:‘2016-09‘ }, //这里可以用ajax回调设置，做到动态获取 ], Apptype:0, num:true, input_disabled:true }, methods:{ change:function(){ console.log(this.selected); } } }, watch:{} });
下面是模拟下拉框框
<div class="dataSelD fleft" id="datePrice"> <i class="icon-date-picker-green"></i> <input v-model="selected" type="text" v-bind:readonly="input_disabled" id="dataSel" class="dataSel" v-on:click.stop="setselUl"> <ul > <li class="selLI" v-for="item in dateList" v-bind:data-val="item.date" v-text="item.date" v-on:click.stop="setSelectVal(item.date)"></li> </ul> </div>
但是原生的样子特别不好看 修改样式的时候几乎不可修改，所以大部分都是用其他标签模拟这个效果。但是在获取值 设置值的时候就多了许多js 不知道浏览器为什么不能用css修改这个下拉框框 感觉和奇怪估计以后会出现css可以修改吧；
下面是模拟下拉框框
<div class="dataSelD fleft" id="datePrice"> <i class="icon-date-picker-green"></i> <input v-model="selected" type="text" v-bind:readonly="input_disabled" id="dataSel" class="dataSel" v-on:click.stop="setselUl"> <ul > <li class="selLI" v-for="item in dateList" v-bind:data-val="item.date" v-text="item.date" v-on:click.stop="setSelectVal(item.date)"></li> </ul> </div>
用input代替seclet 下面东西用ui li 标签来模拟
css
.bill .detailMain .serviceCon1 .dataSelD{margin-top: 30px;position: relative;} .bill .detailMain .serviceCon1 .dataSelD ul{ display:none; left:37px;top:34px; position: absolute; width:165px; border: 1px solid #8aac20;border-top: none;z-index: 999; } .bill .detailMain .serviceCon1 .dataSelD ul li{ font-size:12px;height:28px; line-height: 20px;cursor: pointer; padding: 5px 0 5px 19px; background-color:#ffffff;} .bill .detailMain .serviceCon1 .dataSelD ul li:hover{ color:#ffffff;background-color:#8aac20; } .bill .detailMain .serviceCon1 .dataSelD .dataSel{width: 164px;height:34px; margin-left:38px;font-size: 14px;outline: none;cursor: pointer; background-image:url("/img/bill/icon-input-sel-bg.png"); background-position:147px 14px; background-repeat: no-repeat; background-size:10px 6px; padding: 0 70px 0 15px;border-radius: 0;border:1px solid #ababab;border-left:none;} .bill .detailMain .serviceCon1 .dataSelD .dataSel[disabled]{background-color:#ffffff;} .bill .detailMain .serviceCon1 .dataSelD .dataSel:focus, .bill .detailMain .serviceCon1 .dataSelD .dataSel:hover{ border-top: 0.5px solid #8aac20;border-bottom: 0.5px solid #8aac20;border-right: 0.5px solid #8aac20; }
css比较多 是个绿的主题 这个可以任意修改样式了 变成你想要的
js：
//日期下拉框 var VMdate=new Vue({ el:‘#datePrice‘, data:{ selected:‘请选择日期‘, serviceType:0, dateList:[],//这里是回调设置的数组 num:true, input_disabled:true }, methods:{ setSelectVal:function(val){ $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘none‘); this.num=true; this.selected=val; getBillByDate(val,this.Apptype);//项目里面是请求了另一个接口 }, setselUl:function(){ if(this.num){ $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘block‘); this.num=false; }else{ $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘none‘); this.num=true; } } }, watch:{} });
//模拟的下拉框框，首先解决就是框框的失去焦点的问题 这里用jq //模拟框框的失去焦点事件 关闭框框下面的li标签的东西 $(document).on(‘click‘,function(e){ if(e.target.className==‘selLI‘){ $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘none‘); var $data_val= $(e.target).attr("data-val"); VMdate.selected=$data_val; } else{ $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘none‘); VMdate.num=true; } })
整体的大致思路
页面第一次加载 模拟的下拉框框 v-for循环一个数组，产生多个li标签，但是一开始是没有值的，什么也不会显示。
然后js运行到请求用户账单的接口，回调里面用设置vue实例里面的数组，触发视图更新。页面出现下拉框框的选择。
v-mode双向绑定一个变量到input框框上面 点击li标签的出现的值获取到 设置到vue实例里面的v-model的变量 实现双向绑定 视图更新，js也拿到了值 然后用这个值去请求。
因为是用input框框模拟的下拉框 所以需要jq额外设置失去焦点关闭下面出来li标签的选项，这里用的是绑定document一个点击事件，判断事件的event对象，框框是不是选项li，如果不是 统统执行隐藏ul的方法 如果点击的对象是下面的li标签 就设置vue实例的v-model的变量为li的值。
标签：for循环 size 获取值 mod 下拉 block lis put round
原文地址：http://www.cnblogs.com/fstgshow/p/6044816.html
