vue中动态select的使用方法示例

通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容

<template> <div> <div> <select v-model="selected" @change="getTypeSelected"> <option :value="types.id" v-for="types in typeList" >{{types.name}}</option> </select> </div> </div> </template>

js中写如:

<script> export default { data(){ return{ typeList:[ {id:1,name:'违规类型'}, {id:2,name:'无人值守'}, {id:3,name:'蒙头睡觉'}, ], selected:'' } }, created(){        //如果没有这句代码,select中初始化会是空白的,默认选中就无法实现 this.selected = this.typeList[0].id; }, methods:{ getTypeSelected(){ //获取选中的违规类型 console.log(this.selected) } } } </script>

vue中动态select的使用方法示例

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ff8f4831d08ab8c53293aa8d013bec47.html