<!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循環,還會跳出這個方法
