<!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循环,还会跳出这个方法
