我要评论vue操作select获取option值
如何实时的获取你选中的值 只用@change件事
@change="changecategorylist($event)" 动态传递参数
vue操作select获取option的value值
示例
<div id="app">
<select name="topiccategoryid" class="article-title" id="category" @change="changecategorylist($event)" style="width: 180px;">
<option v-for="(category,index) in categorylist" v-bind:value="category.id">{{category.categorytitle}}</option>
</select>
</div data:{
categorylist:[{id:1,categorytitle:"java面试"},{id:2,categorytitle:"web开发"},
{id:3,categorytitle:"设计系统"},{id:4,categorytitle:"框架服务"}]
},
methods: {
changecategorylist(event){
console.log(event);
var selectindex =event.target.selectedindex;//选中的第几个option元素 从0开始
var options = event.target.options;//代表option组合
options[selectindex].innerhtml //选择的值 // categorytitle
event.target.value; //绑定的value值 //v-bind:value="category.id"
console.log("options[selectindex].innerhtml=="+options[selectindex].innerhtml);
console.log("event.target.value=="+event.target.value);
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论