码迷,mamicode.com
首页 > Web开发 > 详细

vue.js处理下拉框实践

时间:2019-11-25 15:30:49      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:下拉   methods   this   sda   列表   fir   初始   实现   code   

1,目标:实现html中以vue.js初始化select控件,绑定选择事件

2,html部分代码

<div id="app" v-cloak>
                        <select v-model="ss1" v-on:change="changeselect()">    
                            <option v-if="sselect1" v-for="item in sselect1" v-bind:value="item.k" >{{item.lb}}</option>                        
                        </select>                    
                    </div>

 

3,js部分代码

select box的选项列表值是js对象数组。

select box的选中项绑定的是对象的key。

var transdata = [[${record}]];    //thymeleaf表达式    
        
        var vm = Comm.initVue({
            el:"#app",
            data: {
                
                tbdata:transdata,
                sselect1:[{k:‘T1‘,lb:‘X470‘},{k:‘2‘,lb:‘X370‘},{k:‘E3‘,lb:‘B450‘},{k:‘F0‘,lb:‘B365‘},{k:‘X‘,lb:‘H310‘}],
                //ss1:0//OK,first array[0]
                ss1:‘‘//OK,k:‘X‘
            },
            created:function(){                
                this.ss1 = this.sselect1[1].k;
            }
            ,
            methods:{
                changeselect:function(){
                    alert(this.ss1);
                }
            }
        });

 

vue.js处理下拉框实践

标签:下拉   methods   this   sda   列表   fir   初始   实现   code   

原文地址:https://www.cnblogs.com/m160331/p/11927648.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!