vue的复选框和单选框代码实例

1.复选框

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

<p 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>
</p>

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

2. 单选框

道理同上

<p 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>
</p>

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