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>