vue获取下拉框值
时间： 20:32:15
&&&& 阅读：468
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&vue获取下拉框的值，用vue-modle,只有点击下拉框的值才会赋值到下拉框中，初始时下拉框没有数据，而改用$event就不会出现这样的问题，下面看代码以及图解：
v-model解决方式：
&!-- 下拉框 --&
&div v-show="moreStore" class="select"&
　　&select class="choice" v-on:change="indexSelect" v-model="indexId"&
　　　　&option v-for="item in index" v-bind:value="item.indexId"&{{item.name}}&/option&
　　&/select&
下拉框的值：
　　"indexId":1,
　　"name": "点菜用户数"
　　"indexId":2,
　　"name": "点菜新用户数"
　　"indexId":3,
　　"name": "首次留联系方式人数"
　　"indexId":4,
　　"name": "已有联系方式人数"
在这里，indexId要在data里面声明一下
// 获取id值
indexSelect(){
　　console.log(this.indexId);//在这里可以正确输出每个下拉框对应的下标值，当然输出值都是可以的
改用$event的解决方式
&!-- 下拉框 --&
&div v-show="moreStore" class="select"&
　　&select class="choice" v-on:change="indexSelect($event)"&
　　　　&option v-for="item in index" v-bind:value="item.indexId"&{{item.name}}&/option&
　　&/select&
// 获取value值
indexSelect(event){
　　console.log(event.target.value);
当然，可以根据自己的项目需要来选择哪种方法。在这里，v-on：change也可以写成v-on:click
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！{{selectedValue.va" />
vue简单下拉框组件 - CSDN博客
vue简单下拉框组件
因为要将选择的数据传回父组件，所以要传一个对象过去。
class="base-select" @click="showDataList" v-bind:style="{width: widthData}"&
class="sub-selected-value"&
{{selectedValue.value}}
class="sub-select-list" v-bind:style="{width: widthData}" v-if="showData"&
class="sub-select-item" v-for="(item, index) in dataList" @click.stop="select(item, index)"&
{{item.value}}
lang="scss"&
.base-select {
position: relative;
float: right;
border: 1px solid;
height: 25px;
//width: 160px;
position: absolute;
right: 2px;
transform: translateY(-50%);
content: '';
border-top: 5px solid black;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
height: 0;
.sub-selected-value {
position: absolute;
top: -7px;
.sub-select-list {
position: absolute;
top: 33px;
background: white;
//width: 160px;
box-shadow: 1px 1px 1px 1px #D9D9D9;
z-index: 9;
.sub-select-item {
width: auto;
min-width: 7.25rem;
height: 2.5rem;
line-height: 2.5rem;
position: relative;
text-align: left;
position: absolute;
transform: translate(-0.1rem, -50%);
width: .8125rem;
height: .625rem;
type="text/ecmascript-6"&
export default{
showData: false
dataList:Array,
selectedValue: Object,
widthData:{
type: String,
default: "160px"
methods: {
showDataList(){
this.showData=!this.showData
select(item,index){
this.showData=false;
console.log("选择");
console.log(item);
console.log(index);
this.selectedValue.key=item.
this.selectedValue.value=item.
this.$emit('select');
console.log("0"+this.selectedValue.value);
mounted(){
父组件中调用
html代码：
&BaseSelect v-on:select="showProject"
:selectedValue="projectName"
:dataList="list"
:widthData="widthData"&&/BaseSelect&
{key:"gd",value:"卫我好交换空间"},
{key:"gx",value:"我去而且翁群无"},
{key:"gx",value:"王企鹅群无科技二号"}
projectName:{
widthData:"180px",
showProject (){
console.log("下拉列表的值改变了");
console.log("213122"+this.projectName.value);
console.log("213122"+this.projectName.key);
本文已收录于以下专栏：
相关文章推荐
全局安装vue-cli，使用命令npm install -g vue-cli。
下载模板代码，使用命令vue init webpack my-project，之后会有一些询问，按需填写即可。
最后会看...
要开发一个这样的多级多选菜单组件，功能是：
点击父标题栏可以打开与折叠子列表
点击父标题栏的勾选图标可以全选或取消子列表
点击子列表的勾选图标达到全选时，父标题栏的勾选图标自动勾选；反之，没达到全选时...
vue-treevue 编写的树形菜单，小巧实用，支持vue1.0，vue2.0v1.0 功能:
1.支持多级树目录
2.支持高亮点击的节点
3.支持展开点击节点
4.支持点击收缩节点时收缩所有子目录...
使用SemanticUI和vue做一个menubar组件，实现方法大概是这样的：
{{item.text}}
Vue.js 仿 Select 下拉框 DEMO
昨天到今天，用vue2.0在写一个性别选择框，一给option添加seledted属性就报错selected 已经绑定在 上了 , 你选择了哪个选项， selected 就是那个选项的value了 ，...
Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。以及使用过程中要注意的问题...
我在很久以前曾发布过一个美化的单选下拉框组件，一度很火爆。相信现在读我帖子的人里面仍然有在用这个组件的。
以前那个帖子地址：/topic/851317
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)vue百度下拉框 - CSDN博客
vue百度下拉框
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"&
name="apple-mobile-web-app-capable" content="yes"&
name="apple-mobile-web-app-status-bar-style" content="black"&
background: #ccc;
src="../js/vue1.0.js"&&
src="../js/vue-resource.js"&&
window.onload=function(){
el:'body',
myData:[],
get:function(ev){
if(ev.keyCode==38||ev.keyCode==40){
if(ev.keyCode==13){
window.open('/s?wd='+this.t1);
this.t1='';
this.$http.jsonp('/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){
changeDown:function(){
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.t1=this.myData[this.now];
changeUp:function(){
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
this.t1=this.myData[this.now];
type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"&
v-for="value in myData" :class="{gray:$index==now}"&{{value}}&
v-show="myData.length==0"&暂无数据...&
本文已收录于以下专栏：
相关文章推荐
Vue.js 仿 Select 下拉框 DEMO
昨天到今天，用vue2.0在写一个性别选择框，一给option添加seledted属性就报错selected 已经绑定在 上了 , 你选择了哪个选项， selected 就是那个选项的value了 ，...
Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。以及使用过程中要注意的问题...
搜索词自动完成
$(function(){
好像wpf没有现成的组件.自己就用用户控件写了一个using S
using System.Collections.G
using System.L
大部分人在搜索某一个关键词的时候，其实他并不知道该如何组织语言以便更加精确的达到搜索目的，手机百度下拉框就为他提供了便捷 。如果搜索词比较长的话、这样子也节约了时间，所以下拉框是很便捷的。...
今天做了一款省市区select标签
百度地图之间双定位的模块, 给大家分享一下
page.html(页面省市区select标签, 同时还隐藏了经纬度的input, 用于定位); ...
1）、百度的jsonp接口地址：/5a1Fazu8AA54nxGko9WTAnF6hhy/su；
2）、请求参数注意：wd:为关键字，cb:回调函...
当我们在百度的搜索框里面，搜索一个关键词后，首先我们能够看到百度搜索框变成了一个下拉框，很多相关的搜索会出现在下拉框里面，这是百度为了提升用户搜索体验的一种功能，可正是这种功能，往往能够给我们网站推广...
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
vuejs 下拉列表怎样默认选中
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&select class="form-control" name="method" data-itemid="{{ $index }}"&
&template v-for="option in methodOptions"&
&option :value="option" v-if="option == api.method" selected&
{{ option }}
&option :value="option" v-else&
{{ option }}
&/template&
暂时没找到其他的办法
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你可以为select添加一个model进行数据绑定,在vue data里指定这个值就可以了。演示:
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：