复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

 

复选框

以下实例中演示了复选框的双向数据绑定：

 

<div id="app">

  <p>单个复选框：</p>

  <input type="checkbox" id="checkbox" v-model="checked">

  <label for="checkbox">{{ checked }}</label>

    

  <p>多个复选框：</p>

  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">

  <label for="runoob">Runoob</label>

  <input type="checkbox" id="google" value="Google" v-model="checkedNames">

  <label for="google">Google</label>

  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">

  <label for="taobao">taobao</label>

  <br>

  <span>选择的值为: {{ checkedNames }}</span>

</div>

 

<script>

const app = {

  data() {

    return {

      checked : false,

      checkedNames: []

    }

  }

}

 

Vue.createApp(app).mount('#app')

</script>