表单域修饰符
- number：前端输入默认都为字符串，为了业务需求可以使用该指令将输入转化为数值
- trim：去掉开始和结尾的空格
- lazy : 将input事件切换为change事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<form action="http://www.baidu.com">
<div>
<span>姓名：</span>
<span>
<!--双向绑定名字变量-->
<input type="text" v-model='uName' aria-label="姓名">
</span>
</div>
<div>
<span>性别：</span>
<span>
<!--单选-->
<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>
</span>
</div>
<div>
<!--多选-->
<span>爱好：</span>
<input type="checkbox" id="ball" value="1" v-model='hobby'>
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model='hobby'>
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model='hobby'>
<label for="code">写代码</label>
</div>
<div>
<span>职业：</span>
<!--单选-->
<select v-model='job' aria-label="职业选择">
<option value="0">请选择职业</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
<div>
<span>个人简介：</span>
<textarea v-model='desc' aria-label="个人简介"></textarea>
</div>
<div>
<!--添加点击函数，顺便阻止默认行为-->
<input type="submit" value="提交" @click.prevent='handle'>
</div>
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
表单基本操作
*/
let vm = new Vue({
el: '#app',
data: {
uName: 'huHai',
gender: 2,
hobby: ['2','3'],
job: 2,
desc: 'hello'
},
methods: {
handle: function(){
console.log(this.desc)
}
}
});
</script>
</body>
</html>