vue里面v-model对radio/select/checkbox双向绑定的使用

首先是checkbox,单选的

<div id="app">

    <input type="checkbox"  v-model="message">checkSome
    <h2>选了么:{{message}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:false
        }

    })
</script>

然后是多选的,选了那个就会在checkSome里面添加进去

<div id="app">

    <input type="checkbox" value = "checkSome1" v-model="checkSome">checkSome1
    <input type="checkbox" value = "checkSome2" v-model="checkSome">checkSome2
    <input type="checkbox" value = "checkSome3" v-model="checkSome">checkSome3
    <input type="checkbox" value = "checkSome4" v-model="checkSome">checkSome4
    <input type="checkbox" value = "checkSome5" v-model="checkSome">checkSome5
    <h2>选了么:{{checkSome}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:false,
            checkSome:[]
        }

    })
</script>

radio、sex中如果设定值的话就会默认被选中

<div id="app">

    <input type="radio" id="man" value="man" v-model="sex">man
    <input type="radio" id="women" value="women" v-model="sex">women
    <h2>您选的是{{sex}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sex:""

        }

    })
</script>

select
如果想要多选就在select上加上/multiple/就ok了

<div id="app">

    <select v-model="what">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </select>
    <h2>您选的是{{what}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            what:""

        }

    })
</script>