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捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
微信小程序 本地数据读取实例
Apr 27 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP如何使用Memcached
2016/04/05 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
关于运动会的口号
2014/06/07 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
时尚女魔头观后感
2015/06/04 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
环保建议书范文
2015/09/14 职场文书
php 原生分页
2021/04/01 PHP
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python