<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单绑定</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div><!--普通文本输入域-->
用户名:<input type="text" v-model.lazy="uname" />{
{uname}}<!--v-model实现双向绑定,.lazy实现失去焦点时才同步数据-->
</div>
<div><!--密码输入域-->
密码:<input type="password" v-model.trim="password" /><!--默认去除密码中前后输入的空格-->
</div>
<div><!--单选按钮-->
性别:
<input type="radio" value="男" name="sex" v-model="sex"/>男
<input type="radio" value="女" name="sex" v-model="sex"/>女
</div>
<div><!--复选框-->
爱好:
<input type="checkbox" value="1" name="hobby" v-model="hobby" />学习
<input type="checkbox" value="2" name="hobby" v-model="hobby" />画画
<input type="checkbox" value="3" name="hobby" v-model="hobby" />弹钢琴
</div>
<div><!--下拉菜单-->
籍贯:
<select v-model="pro">
<option value="-1">---请选择---</option>
<option value="1">辽宁省</option>
<option value="2">吉林省</option>
<option value="3">江苏省</option>
</select>
</div>
<div><!--多行文本输入域-->
备注:<textarea v-model="comment"></textarea>
</div>
<div>
年龄:<input type="number" v-model.number="age" /><!--.number将从文本框中拿出的数据转换成数值型-->
</div>
<div>
<button type="button" @click="showInfo()">按钮</button>
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
uname:'',
password:'',
sex:'',
hobby:[],
pro:-1,
comment:'',
age:0
},
methods:{
showInfo(){
console.log(typeof(this.age));
}
}
});
</script>
</body>
</html>
