css模擬下拉框，vue獲取雙向綁定的值

原生的下拉框用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:{}
});

 

但是原生的樣子特別不好看 修改樣式的時候幾乎不可修改，所以大部分都是用其他標簽模擬這個效果。但是在獲取值 設置值的時候就多了許多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的值。