在大多数情况下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. 《C++ 习题与解析》笔记

    目录 ####Chapter-1 C++语言概述(错题) ####Chapter-2 类和对象 ####Chapter-3 引用 ####Chapter-4 友元函数 #### Chapter-5 运 ...

  2. Vivado_HLS 编译报错error: AP_STREAM macros are deprecated

    D:/vivado2018.3/Vivado/2018.3/common/technology/autopilot\ap_stream.h:62:2: error: AP_STREAM macros ...

  3. Django 模板语言 变量名称

    Django 模板语言 变量名称 模板语言中已变量形式显示 # view 文件内 def func(request): return render(request,"index.html&q ...

  4. Mysql系列(三)—— Mysql主从复制配置

    一.前言 主从复制是Mysql知识体系中非常重的要一个模块.学习主从复制和后续的读写分离是完善只是知识体系的重要环节.且主从复制读写分离的思想并不仅仅局限于Mysql,在很多存储系统中都有该方案,如: ...

  5. Wamp Https 的 SSL认证 配置说明

    Wamp Https 的 SSL认证 配置说明版本 Apache2.2.11注:右下角图标的 重启 不能有效加载 配置文件 应退出后重新运行注:C:\wamp\bin\apache\Apache2.2 ...

  6. spring mvc 服务器端输出一条可执行js

    @RequestMapping(value = "/test",produces = "text/html; charset=UTF-8") @Response ...

  7. 豆瓣Top250

    """ 爬取豆瓣电影TOP250 - 完整示例代码 """ import codecs import requests from bs4 i ...

  8. loj#10078. 新年好(最短路)

    题目: loj#10078. 新年好 解析: 亲戚只有五个,可以把它们看成2,3,4,5,6号点,分别跑最短路,记录一下距离,然后DFS一下 这题非常玄学,我开了一个\(12*12\)的数组,没有离散 ...

  9. net start mysql 失败提示“NET HELPMSG 3534”

    lz使用的window系统8.0.16版本的mysql,以下四步解决如上问题: 1. mysqld -remove 2. mysqld --initialize 3.mysqld -install(m ...

  10. 面试题:android的安全机制有哪些

    1 uid . gid . gids Android 的权限分离的基础是建立在 Linux 已有的 uid . gid . gids 基础上的 . UID: Android 在 安装一个应用程序,就会 ...