vue.js雙向綁定之--select獲取text

在大多數情況下select下拉菜單都是value和text設置不同的值的，value一般來說是與后台交互的值，而text是前端用來顯示的文本；

但是，vue.js對到表單的雙向綁定時如果option設置了value及text的情況下，model獲取到的是value值！

如果直接綁定值的話，頁面上顯示的文案就是會value，顯然這並不是我們想要的結果！那有什么辦法能獲取到被選中的option中的text呢？

或許過濾器filter可以一試：

Filter代碼：

Vue.filter('optionTxt',function(value,obj){
    var newObj = {};
    if(value=='請選擇'){
        return value
    }else{
        for(var i=0; i<obj.length; i++){
            newObj[obj[i].val] = obj[i].txt;
        }
        return newObj[value]
    }
})

定義過濾器optionTxt,把optionObj對象傳入進行遍歷，用一個新對象newObj儲存相應的值，把選中的value值作為參數傳入返回newObj的值~

VM:

var vm = new Vue({
        el: '#app',
        data: {
            selectTxt: '請選擇',
            optionObj: [
                {val: '1',txt: '選項A'},
                {val: '2',txt: '選項B'},
                {val: '3',txt: '選項C'}
            ]
        }
})

HTML：

<div id="app">
        <div class="container">
            <span>方便聯系時間段</span>
            <p>{{selectTxt | optionTxt(optionObj)}}</p>
            <select v-model="selectTxt ">
                <option v-for="option of optionObj" :value="option.val">{{option.txt}}</option>
            </select>
        </div>
</div>