vue 复选框 ,单选框

复选框

v-model 绑定一个数组，当选中当前项时，改项的value会自动进入数组中，未选中时会自动从数组中删除

<div id='example-3'>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>

</div>

<script>
    new Vue({
        el: '#example-3',
        data: {
            checkedNames: []
        }
    })

</script>

2. 单选框

道理同上

<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})