v-model应用于表单元素
常用的表单元素是可以用v-model来绑定关联 ->快速获取或设置表单元素的值
它会根据控件的类型自动选择正确的方法来更新元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<h3>小白痴网</h3>
<form action="">
姓名: <input v-model="username" type="text"><br><br>
是否单身: <input type="checkbox" v-model="isSingle"><br><br>
性别: <input v-model="sex" type="radio" name="sex" value="1"> 男 <input v-model="sex" type="radio" name="sex" value="2"> 女 <br><br>
城市: <select v-model="cityID" name="" id="">
<option value="00">广州</option>
<option value="01">北京</option>
<option value="10">上海</option>
<option value="11">深圳</option>
</select>
<br><br>
自我描述:<br><br>
<textarea v-model="text" name="" id=""></textarea><br><br>
<input type="button" value="立刻注册">
</form>
</div>
<!-- 引入是开发版本的包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username:'',
isSingle:false,
sex:"1",
cityID:"00",
text:""
},
methods: {
},
})
</script>
</body>
</html>