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()来劫持对象属 ...
随机推荐
- Ubuntu Docker搭建GitLab以及常规配置使用
安装启动实例 1.首先创建一个目录用于存放配置 sudo docker pull docker.io/gitlab/gitlab-ce sudo mkdir -p /root/docker/gitla ...
- python利用dijkstra算法求解图中最短距离
利用dijkstra算法,来完成图中两个顶点间最短的距离,可以直接复制使用,只需要修改参数即可 def dijkstra_raw(edges, from_node, to_node): "& ...
- sqlserver读取日志以及复制
首选,在事务日志中,到底有多少是需要复制的?使用以下命令,可以确定事务日志中被标志为复制的命令有多少. USE test GO SELECT count(*) FROM ::fn_dblog(NULL ...
- intel AVX指令集
听说这 AVX 很牛,,支持Win7,大幅提高游戏浮点运算性能warning C4752: 发现 Intel(R) 高级矢量扩展:请考虑使用 /arch:AVX
- Jmeter的安装与配置。
1.本机配置好JAVA环境. 2.官网下载压缩包,在任意目录下解压. 3.修改配置文件 ,打开Jmeter的bin目录下jmeter.porperties,修改 language=zh_CN samp ...
- 从零搭建一个简单的webpack环境
1.npm Init 2.创建webpack.config.js文件,并配置入口和出口 3.Package.json的script中配置命令对应的操作 .安装webpack-dev-server 模块 ...
- js之正则
1.正则的声明方法 1)var reg = /abc/; "这个叫对象直接量方式": 2)var reg = new RegExp("abc") 这个叫构造函数 ...
- Vue笔记目录
Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待
- Java 之 线程的生命周期(线程状态)
一.线程的生命周期 (1)新建状态 new 好了一个线程对象,此时和普通的 Java对象并没有区别. (2)就绪 就绪状态的线程是具备被CPU调用的能力和状态,也只有这个状态的线程才能被CPU调用.即 ...
- 【python】一篇文章里的词频统计
一.环境 1.python3.6 2.windows系统 3.安装第三方模块 pip install wordcloud #词云展示库 pip install jieba #结巴分词 pip inst ...