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()来劫持对象属 ...
随机推荐
- 034 通过域名访问服务器或本地的图片资源---switchhost+nginx
1.修改host解析 2.使用Nginx代理,实现域名访问 进入Nginx的安装路径E:\toolsoftware\nginx-1.14.0\nginx-1.14.0\conf,修改 添加如下内容: ...
- 【转帖】Alpha、Beta、RC、GA版本的区别
[版本]Alpha.Beta.RC.GA版本的区别 https://www.jianshu.com/p/d69226decbfe Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测 ...
- Java使用正则表达式匹配多行 Pattern flags
Java中正则匹配有多种模式,若不选择模式则默认为单行匹配 匹配模式(Pattern flags) compile()方法有两个模式 未开匹配模式 Pattern compile(String reg ...
- PHP7.3.0+弃用FILTER_FLAG_SCHEME_REQUIRED的解决办法
今天本地调用一个接口报错了: filter_var(): explicit use of FILTER_FLAG_SCHEME_REQUIRED and FILTER_FLAG_HOST_REQUIR ...
- Spring Boot 主从读写分离
自己封装了一个读写分离的 Starter,可以配置任意多个数据源,使用 Hikari 连接池(暂不支持其他连接池). GitHub:rw-separate-spring-boot-starter 代码 ...
- 安装和启动docker
1.安装和启动docker yum update -y yum install -y yum-utils yum-config-manager --add-repo https://download. ...
- .net Dapper 实践系列(6) ---事务删除(Layui+Ajax+Dapper+MySQL)
目录 写在前面 实现步骤 写在最后 写在前面 上一小节,总结了事务多表更新的两种方法.一个是只更新原来的数据,一个是先删除原来的数据再往里面添加新的数据.而这一小节,说的是事务的多表删除. 实现步骤 ...
- C#多线程解决程序卡顿问题
描述: 在 C# 中,System.Threading.Thread 类用于线程的工作.它允许创建并访问多线程应用程序中的单个线程.进程中第一个被执行的线程称为主线程. 案例: static void ...
- CodeForces 955D Scissors
昨晚CF比赛比较颓,今天有心情写题解就不错了QWQ 洛谷题目页面传送门 & CodeForces题目页面传送门 给定字符串\(a,b,|a|=n,|b|=m\),求是否可以在\(a\)中选\( ...
- Julie D. Saba:儿童肿瘤学是一个令人惊奇的领域
编者按 作为一名儿童肿瘤学家,工作中充满了挑战与机遇.近几十年来,世界各地的儿童肿瘤的发病率呈持续上升的趋势.许多人认为这不仅是由于诊断水平的提高,而且是因为儿童肿瘤的潜在风险也确实在增加.据英国儿童 ...