vue.js处理下拉框实践

Posted 2020-11-22 m160331

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);
                }
            }
        });