表单的基本操作以及表单域修饰符的用法
1.表单的基本操作
1.1表单涉及到的标签
input[type="text]
input[type="checkbxo]
input[type="radio]
textarea
1.2代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
form div {
height: 40px;
line-height: 40px;
}
form div:nth-child(4) {
height: auto;
}
form div span:first-child {
display: inline-block;
width: 100px;
}
</style>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<form action="http://itcast.cn">
<div>
<span>姓名：</span>
<span>
<input type="text" v-model='uname'>
</span>
</div>
<div>
<span>性别：</span>
<span>
<input type="radio" id="male" value="男" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="女" v-model='gender'>
<label for="female">女</label>
</span>
</div>
<div>
<span>爱好：</span>
<input type="checkbox" id="ball" value="写代码" v-model='hobby'>
<label for="ball">写代码</label>
<input type="checkbox" id="sing" value="打羽毛球" v-model='hobby'>
<label for="sing">打羽毛球</label>
<input type="checkbox" id="code" value="看csdn博客" v-model='hobby'>
<label for="code">看csdn博客</label>
</div>
<div>
<span>职业：</span>
<select v-model='occupation' multiple>
<option value="hahaha">请选择职业...</option>
<option value="学生">学生</option>
<option value="前端开发工程师">前端开发工程师</option>
<option value="后端开发工程师">后端开发工程师</option>
</select>
</div>
<div>
<span>个人简介：</span>
<textarea v-model.trim='desc'></textarea>
</div><br />
<input type="text" v-model.number='num'><br />
<input type="text" v-model.lazy='msg'><br />
<div>{{msg}}</div>
<div>
<input type="submit" value="提交" @click.prevent='cli'>
</div>
<textarea style="width: 200px;height: 60px;" v-model="selfintro"></textarea>
</form>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
uname: '哈哈哈',
gender: '男',
hobby: ['打羽毛球','写代码'],
occupation: ['',''],
desc: '大家好，我是渣渣灰',
selfintro:'',
num:'',
msg:''
},
methods: {
cli: function(){
this.num=this.num+3;
this.selfintro=this.desc+this.uname+this.gender+this.hobby+this.occupation;
}
}
})
</script>
</body>
</html>
2.表单域修饰符的用法
number：转化为数值
trim：去掉开始和结尾的空格
lazy : 将input事件切换为change事件
在上面的代码代码中都有用到
3.在网页上的效果
3.1未修改和提交前
3.2修改和提交后
原创文章 73
获赞 64
访问量 2731