使用v-model双向绑定 input、select标签

1.绑定复选框示例如下：

<div id="app">
    <p>
	 选择爱好：
	 <input type="checkbox" v-model="checkbox" value="睡觉">睡觉
	 <input type="checkbox" v-model="checkbox" value="打游戏">打游戏
	 <input type="checkbox" v-model="checkbox" value="做梦">做梦
	 <input type="checkbox" v-model="checkbox" value="发呆">发呆
    </p>
    <p>爱好选择结果为：{{checkbox}}</p>
</div>
 <script>
    var vue=new Vue({
        el:"#app",
        data:{
            checkbox:['做梦'],
        },
    });    
</script>

效果图如下：

2.绑定单选框示例如下：

<div id="app">
    <h3>单选框</h3>
    <p>
        <label><input type="radio" v-model="radio" value="男">男</label>
        <label><input type="radio" v-model="radio" value="女"/>女</label>
    </p>
    <p>{{radio}}</p>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            radio:'男',
        },
    });    
</script>

效果图如下：

3.绑定下拉框示例如下：

<div id="app">
    <h3>绑定下拉框</h3>
    <p>选择你的专业：
        <select v-model='select'>
             <option value="web前端">web前端</option>
             <option value="c#">c#</option>
             <option value="java">java</option>
        </select>
    </p>
    <p>你选择的专业为：{{select}}</p>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            select:'java',
        },
    });    
</script>

效果图如下：