井井客

搜索

vue2绑定表单select value的值在option value/text不一致时处理

默认select v-model绑定的是option中的value值,但是在实际中,选择之后,需要显示的是text的值,这个时候该如何显示?

vue2绑定表单select value的值在option value/text不一致时处理

下面是我自己的思路,把问题剖析一下,select绑定值,就是value,这个是不能变化的,因为提交验证的时候需要的是value,那么想将显示的内容从value改为text,则需要从它显示的地方来进行一个过滤。

过滤器默认接受的第一个参数是value,就是select本身的值,第二个参数则可以传递option值的对象数组过来。经过一些计算,将text的值返回。

具体代码可以看一下:

a.vue文件中:

<template>
	<div class="container">
		<span>方便联系时间段</span>
		<p class="gray" :class='{ col6 : selectTime!="请选择" }'>{{selectTime | optionTxt(optionTime) }}</p>
		<select v-model='selectTime'>
			<option v-for="option of optionTime" :value='option.val'>{{option.txt}}</option>
		</select>
	</div>
</template>
<script>
	export default {
	    data () {
	        return {
	            selectTime:'请选择',
	            optionTime:[
	            	{val:'1',txt:'9:00-12:00'},
	            	{val:'2',txt:'12:00-14:00'},
	            	{val:'3',txt:'14:00-18:00'}
	            ]
	        }	
	    }
	}
</script>

中间有个显示样式,当不是默认值中就用深一些的颜色。而在{{selectTime}}的后面,加了一下optionTxt过滤器,(optionTxt)这个是我在全局main.js中写的(因为我的页面中还有其它.vue中需要用到,所以写成全局的)。具体代码如下:

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];
	}
})

我的思路就是将原来option的对象,重新组成{val1:txt1,val2:txt2}这种对象,然后调用的时候,只需用obj[val1]这种就可以获取到txt的值了。

运行起来,结果OK,虽然选择的是value,但是显示的却已经是text了。

vue2绑定表单select value的值在option value/text不一致时处理

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:vue2绑定表单select value的值在option value/text不一致时处理
本文链接:/c/03250.html

上一篇:【vue练习】照着vue官方的指南写的例子
下一篇:offsetTop差一个相对定位结果大不同

文章分类

相关阅读

随便看看