<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>表单控制</h1>
<h2>checkbox的单选</h2>
<!--checkbox的单选---》v-model绑定一个布尔值---》只要选中布尔就为true，反之亦然-->
<p><input type="checkbox" v-model="ischeck">记住密码{{ischeck}}</p>
<h2>radio</h2>
<p>
<!--2 radio的单选 v-model绑定字符串 选中字符串就是value对应的值-->
<input type="radio" v-model="gender" value="1" checked>男
<input type="radio" v-model="gender" value="2">女
<input type="radio" v-model="gender" value="0">未知
{{gender}}
</p>
<h2>checkbox的多选</h2>
<p>
<!--3 checkbox的多选---》v-model绑定一个数组---》多个选中，数组就有多个值-->
<input type="checkbox" v-model="hobby" value="篮球"> 篮球
<input type="checkbox" v-model="hobby" value="足球"> 足球
<input type="checkbox" v-model="hobby" value="橄榄球"> 橄榄球
<input type="checkbox" v-model="hobby" value="乒乓球"> 乒乓球
{{hobby}}
</p>
<h2>提交</h2>
<input type="submit" value="提交" @click="handleSubmit">
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
ischeck: false,
gender: '1',
hobby: []
}
},
methods: {
handleSubmit() {
console.log(this.ischeck)
console.log(this.gender)
console.log(this.hobby)
}
}
})
app.mount("#app")
</script>
</html>
