https://blog.csdn.net/weixin_41056945/article/details/92382436
https://blog.csdn.net/u014717572/article/details/83868192
option 选项内容写在JS中的,通过v-for来遍历的:
通过v-model可以获取到选中的值,如果option中存在value属性,优先获取value值即coupon.id,如果不存在,则获取option的文本内容,也就是下面代码中coupon.name.
通过绑定、设置ID 获取到相应的值:this.value = JSON.stringify(this.DataList.checkId);(ID绑定为字符串类型)
data:{ couponList:[ { id: 'A', name: '优惠券1' }, { id: '1', name: '优惠券2' }, { id: '2', name: '优惠券3' } ], couponSelected: '',},<!-- 通过绑定、设置ID 获取到相应的值 --><select name="public-choice" v-model="couponSelected" @change="getCouponSelected"> <option :value="coupon.id" v-for="coupon in couponList" >{{coupon.name}}</option> </select>created(){ //如果没有这句代码,select中初始化会是空白的,默认选中就无法实现 this.couponSelected = this.couponList[0].id; //或者在接口中 直接获取到ID this.couponSelected = datas.couponid;}, methods:{ getCouponSelected(){ //获取选中的优惠券 console.log(this.couponSelected) }}element:
<el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="getChange"> <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id" </el-option><!--:value="item" --></el-select>getChange(val) {console.log(val) //this.code = val.code; //this.name = val.label; //console.log("选择的name为:" + this.name, "选择的code为:" + this.code); //console.log(val);}, 原生: <select name="status" id="status" v-model="selected"> <option value="">请选择</option> <option value="1">未处理</option> <option value="2">处理中</option> <option value="3">处理完成</option></select>data(){ rerurn { selectvalue: "", searchoptions: [ { ID: "1", VersionNames: "ssdwl" }, { ID: "2", VersionNames: "双皮奶" } ], }} <select class="select_appname" v-model="selectvalue"> <option v-for="(item,index) in selectoptions" :key="index" :value="item.ID" >{{item.VersionNames}}</option></select>this.selectvalue = datas.VersionNameID;