单个复选框:

" />

单个复选框:

" />

单个复选框:

" />

首页 / 知识

Vue3 复选框实例分享

2023-04-11 16:22:00

Vue3 复选框实例分享
复选框
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
 
复选框
以下实例中演示了复选框的双向数据绑定:
 
<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>

复选框分享数据绑定绑定逻辑值数组

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢