<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="main">
<div>
<!--注意这里一定要设置value,否则没有效果-->
<input type="checkbox" v-model="checkArr" value="aaa">aaa
<input type="checkbox" v-model="checkArr" value="bbb">bbb
<input type="checkbox" v-model="checkArr" value="ccc">ccc
{{checkArr}}
</div>
<div>
<!--同样的,这里的value必不可少,而且value的值不能相同否则有问题-->
<input type="radio" v-model="radioSel" value="11111">11111
<input type="radio" v-model="radioSel" value="22222">22222
<input type="radio" v-model="radioSel" value="33333">33333
{{radioSel}}
</div>
</div>
<script>
new Vue({
el: '#main',
data: {
checkArr: [],
radioSel: ''
},
methods: {
}
})
</script>
</body>
</html>
表单中单选与多选按钮的双向数据绑定
最新推荐文章于 2024-03-28 21:46:24 发布