在大多数情况下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>

vue.js双向绑定之--select获取text的更多相关文章

  1. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  2. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  3. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  4. 撸一个vue的双向绑定

    1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...

  5. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  6. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  7. vue 之 双向绑定原理

    一.实现双向绑定 详细版: 前端MVVM实现双向数据绑定的做法大致有如下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的 ...

  8. VUE的双向绑定及局部组件的使用

    vue的双向绑定,使用v-model,v-model只能使用在input  textare    select中 <!DOCTYPE html> <html lang="z ...

  9. 探讨vue的双向绑定原理及实现

    1.vue的实现原理 vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属 ...

随机推荐

  1. angular JS中 ‘=’与angular.copy的区别

    先来看代码: <b>{{test1}}</b> <input type="text" ng-model="test2" title ...

  2. idea(2018.3.5)破解

    第一步:下载idea,https://www.jetbrains.com/idea/download/#section=windows,双击进行安装 第二步:下载破解的jar包:链接:https:// ...

  3. OI之路

    由于各种因素 学习.初赛.时间... 我的oi可能会结束, 我也不甘于放弃, 所以 综合今后的表现, 我再决定 以后我尽量写博客.

  4. sql 语句中定义的变量不能和 sql关键字冲突

    sql 语句中定义的变量不能和 sql关键字冲突 from bs_email_account account LEFT JOIN bs_group_info gp ON account.group_i ...

  5. 面试题 js重写原生函数(以push为例)

    先说明一下为什么要写这个,因为最近在面试,面试的时候面试官问了这个问题,当时是真的没有答上来,回来之后自己考虑了一下,现在给大家分享 要求如下: 重写js push函数,使其能够在push的同时打印出 ...

  6. SQL Server返回DATETIME类型,年、月、日、时、分、秒、毫秒

    SQL Server返回DATETIME类型的年.月.日,有两种方法,如下所示: DECLARE @now DATETIME=GETDATE() --第一种方法 SELECT @now,YEAR(@n ...

  7. ajax 执行成功以后返回的数据走的是error方法而不是success方法的问题

    今天在一个功能的时候发现写的ajax的方法执行后台代码成功后返回前台时执行的是error方法而不是success方法,代码如下 jQuery('#form').ajaxSubmit({ type: & ...

  8. vmare-Tools重启后也不生效的问题

    这也是一个关于 Tools的问题,如题,既不能互相拷贝文件,也不能调节分辨率,好像是因为 Tools 的版本问题 需要进行的操作: 1:sudo apt-get install open-vm-too ...

  9. CentsOS原生RabbitMQ安装过程

    版本依赖问题 RabbitMQ安装时与Erlang的版本一定要保持以下的对应关系,否则会引发无法启动的问题 安装Erlang 下载Erlang依赖 1 wget http://erlang.org/d ...

  10. HttpURLConnection Get和Post发送数据

    Get URL url = new URL(path); HttpURLConnection connection = (HttpURLConnection) url.openConnection() ...