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>
vue.js双向绑定之--select获取text的更多相关文章
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定原理
Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...
- 撸一个vue的双向绑定
1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- vue 之 双向绑定原理
一.实现双向绑定 详细版: 前端MVVM实现双向数据绑定的做法大致有如下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的 ...
- VUE的双向绑定及局部组件的使用
vue的双向绑定,使用v-model,v-model只能使用在input textare select中 <!DOCTYPE html> <html lang="z ...
- 探讨vue的双向绑定原理及实现
1.vue的实现原理 vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属 ...
随机推荐
- angular JS中 ‘=’与angular.copy的区别
先来看代码: <b>{{test1}}</b> <input type="text" ng-model="test2" title ...
- idea(2018.3.5)破解
第一步:下载idea,https://www.jetbrains.com/idea/download/#section=windows,双击进行安装 第二步:下载破解的jar包:链接:https:// ...
- OI之路
由于各种因素 学习.初赛.时间... 我的oi可能会结束, 我也不甘于放弃, 所以 综合今后的表现, 我再决定 以后我尽量写博客.
- sql 语句中定义的变量不能和 sql关键字冲突
sql 语句中定义的变量不能和 sql关键字冲突 from bs_email_account account LEFT JOIN bs_group_info gp ON account.group_i ...
- 面试题 js重写原生函数(以push为例)
先说明一下为什么要写这个,因为最近在面试,面试的时候面试官问了这个问题,当时是真的没有答上来,回来之后自己考虑了一下,现在给大家分享 要求如下: 重写js push函数,使其能够在push的同时打印出 ...
- SQL Server返回DATETIME类型,年、月、日、时、分、秒、毫秒
SQL Server返回DATETIME类型的年.月.日,有两种方法,如下所示: DECLARE @now DATETIME=GETDATE() --第一种方法 SELECT @now,YEAR(@n ...
- ajax 执行成功以后返回的数据走的是error方法而不是success方法的问题
今天在一个功能的时候发现写的ajax的方法执行后台代码成功后返回前台时执行的是error方法而不是success方法,代码如下 jQuery('#form').ajaxSubmit({ type: & ...
- vmare-Tools重启后也不生效的问题
这也是一个关于 Tools的问题,如题,既不能互相拷贝文件,也不能调节分辨率,好像是因为 Tools 的版本问题 需要进行的操作: 1:sudo apt-get install open-vm-too ...
- CentsOS原生RabbitMQ安装过程
版本依赖问题 RabbitMQ安装时与Erlang的版本一定要保持以下的对应关系,否则会引发无法启动的问题 安装Erlang 下载Erlang依赖 1 wget http://erlang.org/d ...
- HttpURLConnection Get和Post发送数据
Get URL url = new URL(path); HttpURLConnection connection = (HttpURLConnection) url.openConnection() ...