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 相关文章推荐
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
了解JavaScript中的选择器
May 24 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 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下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Django模板Templates使用方法详解
2019/07/19 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python日志syslog使用原理详解
2020/02/18 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
培训楼经理岗位责任制
2014/02/10 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
电焊工岗位职责
2014/03/06 职场文书
秋天的图画教学反思
2014/05/01 职场文书
购房委托书范本
2014/09/18 职场文书
出国签证在职证明
2014/09/20 职场文书
师德承诺书
2015/01/20 职场文书
大学学生会辞职信
2015/05/13 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书