vue select 数据绑定方法

vue select 数据绑定方法


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 数据绑定 - select</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="vm01">
        {{ message }}
    </div>
    <hr>
    <div id="vm02">
        <select v-model="s_selected" @change="select_change">
            <option v-for="(item,index) in s_option" :key="index" :value="item.value" v-text="item.title"></option>
        </select>
    </div>
    <script>
        var vm01 = new Vue({
            el: '#vm01',
            data: {
                message: 'Hello Vue!'
            }
        });
        var vm02 = new Vue({
            el: '#vm02',
            data: {
                s_option: [
                    {
                        "title": "请选择",
                        "value": 0
                    },
                    {
                        "title": "AAA",
                        "value": 10
                    },
                    {
                        "title": "BBB",
                        "value": 20
                    },
                    {
                        "title": "CCC",
                        "value": 30
                    },
                ],
                s_selected: 0
            },
            methods:{
                    select_change(e){
                        this.s_selected = parseInt(e.target.value);
                        console.log('s_selected->',this.s_selected);
                        console.log('change_index->',e.target.selectedIndex) // 选择项的index索引
                        console.log('change-value->',e.target.value) // 选择项的value
                    }
            }
        });
    </script>
    
</body>
</html>