<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 单选框 -->
<label for="agree">
<input id= "agree" type="checkbox" v-model="isAgree"/>接受协议
</label>
<button :disabled="!isAgree">登录</button>
<hr />
<!-- 多选选框 -->
<input type="checkbox" value="足球" v-model="hobbies"/>足球
<input type="checkbox" value="篮球" v-model="hobbies"/>篮球
<input type="checkbox" value="排球" v-model="hobbies"/>排球
<input type="checkbox" value="羽毛球" v-model="hobbies"/>羽毛球
<h3>选中的爱好: {{hobbies}}</h3>
</div>
</body>
<script type="application/javascript" src="./js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isAgree: false,
hobbies: []
}
});
</script>
</html>
v-model-checkbox
最新推荐文章于 2023-11-28 04:52:25 发布