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