vue复选框的双向数据绑定

<div id="app">
<p>单个复选框</p>
<input type="checkbox" id="box" v-model="checked">
<label for="box">{{checked}}</label>
<p>多个复选框</p>
<input type="checkbox" id="baidu" value="baidu" v-model="checkedName">
<label for="baidu">百度</label>
<input type="checkbox" id="bird" value="bird" v-model="checkedName">
<label for="bird">bird100</label>
<input type="checkbox" id="qianduan" value="qianduan" v-model="checkedName">
<label for="qianduan">前端菜鸟</label><br />
<span>选择的值为: {{checkedName}}</span>
<input type="hidden" v-bind:value="checkedName">
</div>

<script type="text/javascript">
new Vue({
el:"#app",
data:{
checked:false,
checkedName:[]
}
})

</script>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: