Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title>
    </head>
    <body>
        <!-- 单选按钮 -->
        <div id="app">
            <input type="radio" value="选择1" v-model="radio"/>
            <label>选择1</label>
            <input type="radio" value="选择2" v-model="radio"/>
            <label>选择2</label>
            <p>所选择:{{radio}}</p>
        </div>
        
        <!-- 选择框(单选时) -->
        <div id="app1">
            <select v-model="select">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <p>所选择:{{select}}</p>
        </div>

 

<!-- 用 v-for 渲染的动态选项 -->
        <div id="app2">
            <select v-model="select">
                <option v-for="item in list" v-bind:value="item.id">{{item.name}}</option>
            </select>
            <p>所选择:{{select}}</p>
        </div>
        <script src="vue.js"></script>
        <script>
            //单选按钮
            var app=new Vue({
                el:"#app",
                data:{
                    radio:"选择1"
                }
            });
            
            //选择框(单选时)
                var app=new Vue({
                el:"#app1",
                data:{
                    select:""
                }
            });

//用 v-for 渲染的动态选项
            var app2 = new Vue({
                el: "#app2",
                data: {
                    select: '1',
                    list: [{
                            id: 1,
                            name: 'A'
                        },
                        {
                            id: 2,
                            name: 'B'
                        },
                        {
                            id: 3,
                            name: 'C'
                        }
                    ],
                }
            })


            
        </script>
    </body>
</html>

选择框(多选时):只需要把select:[]  即可,并且添加multiple;

posted @ 2019-04-27 10:15  又又IT  阅读(7469)  评论(0编辑  收藏  举报