VUE select 双向绑定

如下截图及源码,可以跑起来看看效果,select的双向绑定,指定v-model键就可以,内部的option被选中后,对应的值就会透传到select的v-model指令中。使用的时候,取其值就可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <select v-model='optionesValue'>
            <option v-for="(item,index) of listArray" :value=item.age :key='index'>{{item.age}}</option>
        </select>
        <button v-on:click='buttonClickAtion' style="display: inline-block;margin-left: 20PX">确认</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data:{
                optionesValue:'24',
                listArray:[{
                    name:'01',age:'20'},
                    {name:'02',age:'21'},
                    {name:'02',age:'22'},
                    {name:'03',age:'23'},
                    {name:'04',age:'24'}
                ]
            },
            methods:{
                buttonClickAtion:function()
                {
                    alert(this.optionesValue);
                }
           }
        })
    </script>
</body>
</html>

发布了45 篇原创文章 · 获赞 9 · 访问量 8万+

猜你喜欢

转载自blog.csdn.net/yunhuaikong/article/details/96868171