全国服务热线:4008-888-888

行业新闻

餐饮微信小程序案例_vue中动态select的使用方法示

vue中动态select的使用方法示例     .   这篇文章主要介绍了vue中动态select的使用方法,结合实例形式分析了vue.js使用动态select创建下拉菜单相关实现技巧与操作注意事项,需要的朋友可以参考下

本文实例讲述了vue中动态select的使用方法。分享给大家供大家参考,具体如下:

html代码如下:

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

 template 
 div 
 div 
 select name="selected" id="" 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.js程序设计有所帮助。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服