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的值。