CSS simulation drop-down box, Vue gets the value of the two-way binding

Native drop-down box with Vue get value two-way binding it's just not too easy, duang.

<DivID= "Dateprice"><SelectV-model= "Selected"ID= "Datasel"class= "Datasel"V-on:change= "Change"><optionv-for= "Item in Datelist"V-bind:value= "Item.date"V-text= "Item.date"></option></Select></Div>

Js:

varVmdate=NewVue ({el:' #datePrice ', data:{selected:' Please select a date ', ServiceType:0, datelist:[{' Date ': ' 2016-11 '},{' Date ': ' 2016-10 '},{' Date ': ' 2016-09 '},//You can use the AJAX callback settings for dynamic access], Apptype:0, Num:true, input_disabled:true}, methods:{change:function() {Console.log ( This. selected);} }}, watch:{}});

Below is the mock drop-down box

<Divclass= "Dataseld fleft"ID= "Dateprice"><Iclass= "Icon-date-picker-green"></I><inputV-model= "Selected"type= "text"v-bind:readonly= "input_disabled"ID= "Datasel"class= "Datasel"V-on:click.stop= "Setselul"><ul><Liclass= "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>

But the original looks especially bad. Changes in style are almost non-modifiable, so most of them use other tags to simulate this effect. But when the value is set to the value of more than a lot of JS do not know why the browser can not use CSS to modify the dropdown box feeling and strange estimate will appear after the CSS can be modified it;

Below is the mock drop-down box

<Divclass= "Dataseld fleft"ID= "Dateprice">   <Iclass= "Icon-date-picker-green"></I>   <inputV-model= "Selected"type= "text"v-bind:readonly= "input_disabled"ID= "Datasel"class= "Datasel"V-on:click.stop= "Setselul">   <ul>      <Liclass= "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>

Use input instead of seclet to simulate with the UI Li Tag.
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 {Border-top:0.5px Solid #8aac20;Border-bottom:0.5px Solid #8aac20;Border-right:0.5px Solid #8aac20;}

CSS is more of a green theme this can be arbitrarily modified style to become what you want
Js:

//Date drop-down boxvarVmdate=NewVue ({el:' #datePrice ', data:{selected:' Please select a date ', ServiceType:0, datelist:[],//here is an array of callback settingsNum:true, input_disabled:true}, methods:{Setselectval:function(val) {$ ('. ServiceCon1. Dataseld ul '). CSS (' Display ', ' none '));  This. num=true;  This. selected=Val; Getbillbydate (Val, This. Apptype);//within the project, another interface was requested.}, 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:{});

//simulation of the drop-down box, the first to solve is the box of the lost focus of the problem here with JQ//simulation box loses focus event closes the box under the LI tag something$ (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; }})

General idea of the whole
The first time the page loads the simulated drop-down box v-for loops an array, producing multiple Li tags, but at first there is no value and nothing is displayed.
Then JS runs to the interface requesting the user's bill, which is used to set the array inside the Vue instance to trigger the view update. The page appears with the dropdown box selected.
V-mode Two-way binding a variable to the input box above click on the value of the Li tag to get to the set of V-model in the Vue instance of the variable implementation of two-way binding view updates, JS also got the value and then use this value to request.
Because it is a drop-down box that is modeled with the input frame, it requires JQ additional settings to lose focus off the options under the Li tag, which is used to bind the document a click event, to determine the event object, the box is not the option Li, if not all do hide the Ul method If you click on an object that is the following Li tag, set the V-model variable of the Vue instance to the value of Li.

CSS simulation drop-down box, Vue gets the value of the two-way binding