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 相关文章推荐
js日期时间补零的小例子
Mar 05 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
VUE重点问题总结
Mar 19 Javascript
vue.js实现标签页切换效果
Jun 07 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
php正则表达式(regar expression)
2011/09/10 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
js图片预加载示例
2014/04/30 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python版微信红包分配算法
2015/05/04 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python简单验证码识别的实现方法
2019/05/10 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python之指数与E记法的区别详解
2019/11/21 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
《中华少年》教学反思
2014/02/15 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
大学生交通专业求职信
2014/09/01 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js