vue如何去动态获取下拉框的值

最新推荐文章于 2024-06-28 14:48:19 发布
最新推荐文章于 2024-06-28 14:48:19 发布
阅读量3.6k 收藏 6
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/atangxue/article/details/108635929
版权

vue中可以使用对象数组和v-for去循环创造出一个下拉框
代码如下

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="sa" >
			<div>
				<select >
					<option v-for="(a,b) in student" v-bind:value="a.sid">{{a.sname}}</option>
				</select>
			</div>
		</div>
	</body>
	<script>
		var v=new Vue({
			el:"#sa",
			data:{
				student:[
					{sid:1,sname:"李畅"},
					{sid:2,sname:"李某人"},
					{sid:3,sname:"李人"}
				]

			},
			methods:{
			}
		})
	</script>
</html>

如果要去获取你选定的下拉框的值可以在div层中的select标签和vue的date中添加属性
代码如下
select标签添加属性@change=“chang()” v-model=“sid”

<div id="sa" >
			<div>
				<select @change="chang()" v-model="sid">
					<option v-for="(a,b) in student" v-bind:value="a.sid">{{a.sname}}</option>
				</select>
			</div>
		</div>

在data中添加sid属性和方法

data:{
				sid:2,
				student:[
					{sid:1,sname:"李畅"},
					{sid:2,sname:"李某人"},
					{sid:3,sname:"李人"}
				]

			},
methods:{
				chang:function(){
					console.log(this.sid);
				}
			}

效果如下图
在这里插入图片描述

为了心中所想
关注
使用ant design vue+ts的vue3项目遇到的根据动态id获取动态下拉列表值
qq_53821346的博客
04-13 1119
根据动态id获取动态下拉列表值
vue 实现表单下拉框 --- 并且获取其中的值
北芒的博客
06-18 3652
说明 使用到了 v-model 指令 开始使用 获取下拉表单中的值 原理就是直接绑定 type 里面的值利用双向绑定的原理实现 <div id="app"> <select v-model="type"> //框里面的值会随着 type 值的变化而变化（关键） <option value="1">一---1</option> <option value.
【前端10】vue3中使用handsontable动态加载数据
最新发布
Noyade的博客
06-28 369
【代码】【前端10】vue3中使用handsontable动态加载数据。
vue3 vben下拉框数据接口获取
weixin_45924208的博客
10-19 660
【代码】接口获取下拉框数据。
vue 获取下拉框选中的值
Liber_Y的博客
05-17 4439
<template> <div class=""> <select @change="getEventType($event)"> <option v-for="option in list" :key="option.value" :id="option.value" :name="option.name" > </option>
vue获取下拉框值
weixin_30708329的博客
08-01 7737
vue获取下拉框的值，用vue-modle,只有点击下拉框的值才会赋值到下拉框中，初始时下拉框没有数据，而改用$event就不会出现这样的问题，下面看代码以及图解： v-model解决方式： <!-- 下拉框 --> <div v-show="moreStore" class="select"> 　　<select class="choice" v-on:ch...
Vue获取下拉框中的值
光头强的博客
01-19 1万+
一、获取含有默认省的下拉框中的name值 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;script src
VUE 创建下拉框并在子组件中动态获取下拉框中的值
qq_44857235的博客
11-10 1751
父组件中创建下拉框 template中的代码 <template> <el-option v-for="item in options" :label="item.text" :key="item.value" :value="item.text"> </el-option> </el-select> </template>` s.
在Vue 中获取下拉框的文本及选项值操作
01-19
方法1： <!-- element表单组件 --> :model=ruleForm label-position right ref=ruleForm u6807记的 status-icon size=small inline :rules rules label-width=150px ...el-input v-model.number=rul
浅谈Vue Element中Select下拉框选取值的问题
08-27
Vue Element 中 Select 下拉框选取值的问题 在 Vue Element 中，Select 下拉框是非常常用的一个组件，它可以让用户快速地选择某个选项。但是，在实际开发中，我们经常会遇到一些问题，例如如何获取选中后的值、如何...
vue项目获取下拉框选中id_vue获取下拉框值
weixin_39552204的博客
12-18 5571
vue获取下拉框的值，用vue-modle,只有点击下拉框的值才会赋值到下拉框中，初始时下拉框没有数据，而改用$event就不会出现这样的问题，下面看代码以及图解：v-model解决方式：{{item.name}}下拉框的值：index: [{"indexId":1,"name": "点菜用户数"}, {"indexId":2,"name": "点菜新用户数"}, {"indexId":3,"na...
Vue获取下拉框中选中的value值和label值
Vanllen_moon的博客
04-11 9011
前提： 使用v-for循环渲染选择项，如下图例子 例子中allVillage为数组，每个数组元素是对象，对象中含有id和name :value与v-model的值是互相绑定的，可以在data中定义变量进而直接获取到 如图，可以通过this,paneOneForm.villageId拿到value中绑定的id值 获取选中的文本值，即label值，结合使用数组的find方法 let obj = {} obj = this.allVillage.find((item) => item.id === th
vue项目获取下拉框选中id_在Vue 中获取下拉框的文本及选项值操作
weixin_39740737的博客
12-18 1953
方法1：:model="ruleForm"label-position="right"ref="ruleForm" // 被ref 标记的status-iconsize="small"inline:rules="rules"label-width="150px"class="demo-ruleForm">:options="productsDataOptions"v-model="rule...
vue下拉框 获取选中的值
weixin_42327537的博客
10-24 7583
<template> <div> <!-- 下拉框获取value值 --> <el-select v-model="query" @change="selectChanged"> <el-option v-for="item in options" :key="item.value" :value="item" :label="item.label"></el-option&gt
vue下拉框（选择框）动态取值
你离优秀差多少
10-27 4695
1.在下拉框加上change方法@on-change="" <FormItem label="客户" prop="cust"> <Select @on-change="getCustName" v-model="modalFormItem.cust" filterable> <Option v-for="item in cityList7" :value="item.ID" :key="item.ID" >{{ item.NAME }}&lt
Vue 下拉框获取数据
Mr_aswl的博客
09-09 6501
Vue 使用数据网上很多方法都需要使用到路由器 但是我不太会，于是自己写了一个小组件也可以起到获取数据库数据并返回到 Vue 下拉框的作用 <template> <div class="demo"> <el-select v-model="queryParams" @change="selectPlatform($event)"> <el-option v-for="(item,index) in timeList" :key="ind
vue实现动态下拉框
weixin_62328829的博客
09-27 2529
vue实现动态下拉框
Vue 中获取下拉框的文本及选项值
热门推荐
andy5520的博客
05-30 2万+
方法1： <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="d...
vue拿到下拉框el-select的选择项的value和label
weixin_53339757的博客
06-28 4830
vue实现同时拿到下拉框的值和名称
vue 获取一个下拉框的值
05-16
如果你使用了 Vue.js，可以使用 `v-model` 指令将下拉框的值绑定到 Vue 实例的一个数据属性上，然后在需要获取下拉框的值的时候，直接访问这个数据属性即可。例如： HTML 代码： ```html <select v-model="selected"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> ``` Vue 实例代码： ```javascript var app = new Vue({ el: '#app', data: { selected: '' // 用于绑定下拉框的值 }, methods: { getValue: function() { console.log(this.selected); // 在这里获取下拉框的值 } } }); ``` 在上面的代码中，`selected` 属性被绑定到了下拉框的值，当用户选择下拉框中的一个选项时，`selected` 属性的值就会自动更新。在 `getValue` 方法中，可以直接访问 `selected` 属性来获取下拉框的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值