Vue表单之v-model绑定下拉列表功能
作者：Rabbit_svip 发布时间：2024-05-13 09:07:07
标签：vue,表单,v-model,下拉列表
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绑定下拉列表,网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
来源：https://www.jianshu.com/p/a7154f4e1777
0
投稿猜你喜欢
写python脚本的初衷，每次在windows编辑完文件后，想同步到linux上去，只能够登录服务器，然后再利用网络copy,重复性很大，就- 最近项目中需要Python的打包，看到网上也没有很详细的资料，于是做了一些示例程序。研究了一下，Python如何在Windows和Linux
- 本文实例讲述了PHP缓存集成库phpFastCache用法。分享给大家供大家参考。具体分析如下：phpFastCache是一个开源的PHP缓
- 赠送QQ秀流程是QQ秀商城关键流程之一，占了收入最直接的一部分。它的优化是后续商城流程优化的重要参考。OK，现在就用TA做例子，分享一下流程
- MySQL出现乱码的原因要了解为什么会出现乱码，我们就先要理解：从客户端发起请求，到MySQL存储数据，再到下次从表取回客户端的过程中，哪些
- 这篇文章主要介绍了Python统计时间内的并发数代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的
- 引言近期网上这位卖蜂蜜的小伙鬼畜挺火的，大家质疑背景造假，这里我就带着大家实现“背景造假”（PS:原
- pytorch保存数据pytorch保存数据的格式为.t7文件或者.pth文件，t7文件是沿用torch7中读取模型权重的方式。而pth文件
- 最近要使用python调用C++编译生成的DLL动态链接库，因此学习了一下ctypes库的基本使用。ctypes是一个用于Python的外部
- order by 是怎么工作的？表定义CREATE TABLE `t1` ( `id` int(11) NOT NULL, &n
- 引言提到 numpy 的数组操作，我们就不得不说到 np.concatenate() 函数，concatenate 一词在英文中是级联的意思
- 我们可以利用 Cookie collection 来刪除客户端的Cookies： <％
- 一、前言今天有粉丝咨询了一个问题，他现在有两个列表，它们的元素都为字典，且字典都有一个key为id，现在想把这两个字典根据id合并为一个字典
- 在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7
- 到目前为止，我们连接的都是两张不同的表，那么能不能对一张表进行自我连接呢？答案是肯定的。有没有必要对一张表进行自我连接呢？答案也是肯定的。
- 如果是在Oracle10g之前，删除一个表空间中的数据文件后，其文件在数据库数据字典中会仍然存在，除非你删除表空间，否则文件信息不会清除。但
- 今天使用python计算数据相关性，但是发现计算出的表格中间好多省略号，而且也不对齐。这也太难看了。于是在程序里加了三行：pd.set_op
- Session实现原理实现请求身份验证的方式很多，其中一种广泛接受的方式是使用服务器端产生的Session ID结合浏览器的Cookie实现
- 最近我在Go Forum 中发现了String size of 20 character 的问题，“hollowaykeanho” 给出了相
- 1. 添加一个新对象前面介绍了映射到实体表的映射类User，如果我们想将其持久化(Persist)，那么就需要将这个由User类建立的对象实
