最近在熟悉vue,学到了v-model标签，想把v-model标签用到select标签上，进行双向绑定，发现v-model只能绑定到select的值，如果我想获取到选中option的显示的内容，怎么办呢？于是有了本片博文，详细代码如下：

       body里面没有使用v-model标签，如果用v-model标签，data里面就要多声明一个变量，change事件通过e.target.value也可以获取到值，为了减少变量数，就没有用。内容如下：

<select @change="selectChange">
    <option value ="">-请选择-</option>
    <option v-for="alphaItem in alphabet" :value="alphaItem.name">
        {{alphaItem.value}} </option>				
</select>
<span>选中的内容为：{{alphaModelItem.value}}，key为：{{alphaModelItem.name}}</span>

    data里面的内容：

alphabet:[							
	{name:'a',value:'AAAAAAAAAAAA'},
	{name:'b',value:'BBBBBBBBBBBB'},
	{name:'c',value:'CCCCCCCCCCC'},
	{name:'d',value:'DDDDDDDDDDD'},
	{name:'e',value:'EEEEEEEEEEEE'}
],
alphaModelItem:{}

    methods里面，主要是通过forEach循环找到选中的项，内容如下：

selectChange(e){
	this.alphaModelItem = {name:'',value:''};
	if(String(e.target.value).length == 0) return;
	this.alphabet.forEach((item) =>{
		if(item.name == e.target.value){
			this.alphaModelItem = item;
			return;
		}
	});
}

最后效果如下：