<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 双向数据绑定-->
<input type="text" placeholder="请输入" v-model="msg">
<p>{{msg}}</p>
<!-- 存的值是value id和for搭配-->
<input type="radio" value="男" id="male" v-model="gender"> <label for="male">男</label>
<input type="radio" value="女" id="female" v-model="gender"> <label for="female">女</label>
<p>{{gender}}</p>
<!-- 单个复选框只能接受boolean-->
<input type="checkbox" id="checkbox" v-model="check"> <label for="checkbox">{{check}}</label>
<!-- 多个复选框存值 直接存就行-->
<br>
<input type="checkbox" id="yazhuazhua" value="鸭爪爪" v-model="food"> <label for="yazhuazhua">鸭爪爪</label>
<input type="checkbox" id="huoguo" value="火锅" v-model="food"> <label for="huoguo">火锅</label>
<input type="checkbox" id="hanbao" value="汉堡" v-model="food"> <label for="hanbao">汉堡</label>
<input type="checkbox" id="yangrouchuan" value="羊肉串" v-model="food"> <label for="yangrouchuan">羊肉串</label>
<input type="checkbox" id="oupian" value="藕片" v-model="food"> <label for="oupian">藕片</label>
<p>{{food}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
msg:"请输入",
gender:"男",
check:false,
food:[]
}
}
})
</script>
</body>
</html>
Python3Turtle