vue 复选框 ,单选框

复选框

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

<div id='example-3'>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jacklabel>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">Johnlabel>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mikelabel>
    <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">Onelabel> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Twolabel> <br> <span>Picked: {{ picked }}span> div>

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