Vue表单之v-model绑定下拉列表功能


Posted in Javascript onMay 14, 2019

vue要绑定下拉列表会稍微有点不同。

因为下拉列表不是一个标签能搞掂的。

原生的html写法如下

<select>
 <option value="Vue.js">Vue.js</option>
 <option value="React.js">React.js</option>
 <option value="Angular.js">Angular.js</option>
</select>

通常下拉列表会用到两个标签, <select> 和 <option> 。

在Vue中要绑定,需要把 v-model 写在 select 标签里。

代码如下

<template>
 <div id="app">
 <select v-model="selectCurriculums">
  <option v-for="(curriculum, index) in curriculums" :key="index">{{curriculum}}</option>
 </select>

 <span>{{selectCurriculums}}</span>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
 return {
  selectCurriculums: 'React.js',
  curriculums: ['Vue.js', 'React.js', 'Angular.js']
 }
 }
}

curriculums 是初始化数组,提供值给 option 。

selectCurriculums 提供了一个初始值。

每当选中一个 <option> ,就会对应的更新 selectCurriculums 的数据。

Vue表单之v-model绑定下拉列表功能

总结

以上所述是小编给大家介绍的Vue表单之v-model绑定下拉列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 #jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 #Javascript
vue实现动态按钮功能
May 13 #Javascript
详解小程序之简单登录注册表单验证
May 13 #Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 #Javascript
vue项目前端知识点整理【收藏】
May 13 #Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
You might like
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
Python的动态重新封装的教程
2015/04/11 Python
Python正则简单实例分析
2017/03/21 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
利用python实现汉诺塔游戏
2021/03/01 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
客服部工作职责范本
2014/02/14 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
整改通知书格式
2015/04/22 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
思想品德课教学反思
2016/02/24 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server