表单的基本操作
基于Vue的表单基本操作
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单操作</title>
<style>
form div {
height: 40px;
line-height: 40px;
font-size: 13px;
}
form div:nth-child(5) {
height: auto;
}
form div label {
display: inline-block;
width: 65px;
}
</style>
</head>
<body>
<div id="app">
<form action='https://blog.csdn.net/weixin_44604586'>
<div>
<label for="">姓名：</label>
<input type="text" v-model="username">
</div>
<div>
<label for="">性别：</label>
<input type="radio" id="male" value='1' v-model="gender"><span>男</span>
<input type="radio" id="emale" value='2' v-model="gender"><span>女</span>
</div>
<div>
<label for="">爱好：</label>
<input type="checkbox" id="basketball" value="1" v-model='hobby'><span>篮球</span>
<input type="checkbox" id="sing" value="2" v-model='hobby'><span>唱歌</span>
<input type="checkbox" id="code" value="3" v-model='hobby'><span>敲代码</span>
</div>
<!-- 单选下拉框 -->
<div>
<label for="">职业：</label>
<select v-model="occupation">
<option value="0">请选择职业...</option>
<option value="1">学生</option>
<option value="2">程序员</option>
<option value="3">教师</option>
</select>
</div>
<!-- 多选下拉框 -->
<div>
<label for="">职业：</label>
<select v-model="occupation1" multiple='true'>
<option value="0">[多选]请选择职业...</option>
<option value="1">学生</option>
<option value="2">程序员</option>
<option value="3">教师</option>
</select>
</div>
<div>
<label for="">个人简介：</label>
<textarea v-model="desc"></textarea>
</div>
<div>
<!-- 使用prevent指令可以阻止默认提交表单行为 -->
<input type="submit" @click.prevent="submitForm">
</div>
</form>
</div>
<script src="js/vue-2.5.16.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
username: 'cmy',
gender: 1,
hobby: ['1'],
occupation: 3,
occupation1: [1],
desc: '你好'
},
methods: {
submitForm: function() {
console.log(this.username);
console.log(this.gender);
console.log(this.occupation);
console.log(this.occupation1);
console.log(this.desc);
}
}
});
</script>
</body>
</html>
案例分析
-
input单行文本使用
v-model进行数据的双向绑定 -
textarea多行文本使用
v-model进行数据的双向绑定 -
select下拉单选和多选-
单选
给
select标签双向绑定一个变量occupation，然后在select标签里分别给option标签的value属性赋值。occupation的值代表着某个option被选中 -
多选
给
select标签双向绑定一个数组occupation1，然后在select标签里分别给option标签的value属性赋值。occupation1的值代表着哪些option被选中
-
-
radio单选框给标签的
value属性赋值，然后使用v-model进行数据的双向绑定 -
checkbox多选框给标签的
value属性赋值，然后使用v-model进行数据的双向绑定。绑定的是一个数组
表单域修饰符
-
number：将数据类型转化为数值<input type="text" v-model.number="age"> -
tirm：去掉字符串开始和结尾的空格<input type="text" v-model.trim="info"> -
lazy：将input事件转换为change(失焦)事件<input type="text" v-model.lazy="msg">