<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-select v-model="opvalue" placeholder="请选择"> //这里v-model获取的是value值
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="success" @click="getdata">提交</el-button>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
options: [{
value: '1',
label: '黄金糕'
}, {
value: '2',
label: '双皮奶'
}, {
value: '3',
label: '蚵仔煎'
}, {
value: '4',
label: '龙须面'
}, {
value: '5',
label: '北京烤鸭'
}],
opvalue: '',
mylabel:'',
};
},
methods: {
getdata(){
//获取label值
for(let key in this.options){
if( this.options[key].value==this.opvalue){
this.mylabel=this.options[key].label
}
}
let params={
value:this.opvalue,
label:this.mylabel
};
console.log(params)
}
},
created(){
// axios.get("./data/a.json").then(res=>{
// console.log(res.data[0])
// this.opvalue=res.data[0].label;
// }).catch(err=>{
// console.log(err);
// })
}
})
</script>
</html>
// 在多选框中 v-model中获取的值,是value值 传递给后台的值.
// 如何同时获取label和value呢？
// 如何一个方法中,有for循环,for循环中有break,它将不仅跳出for循环,还会跳出这个方法
