一、基于Vue的表单操作
1.input 单行文本
2.textarea 多行文本
3.select 下拉多选
4.radio 单选框
5.checkbox 多选框
<!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>
</head>
<body>
<div id="app">
<form action="http://www.baidu.com">
<div>
<span>姓名:</span>
<span>
<input type="text" v-model='uname'>
</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>
<!-- 多选下拉 增加 multiple="true", v-model="occupation" 改为数组对象 -->
<select v-model="occupation" >
<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" ></textarea>
</div>
<div>
<input type="submit" value="提交" v-on:click.prevent="handle">
</div>
</form>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" >
/*
表单操作
1.基于Vue的表单操作
1.input 单行文本
2.textarea 多行文本
3.select 下拉多选
4.radio 单选框
5.checkbox 多选框
*/
var vm = new Vue({
el:'#app',
data:{
uname: 'james',
gender: 1,
hobby: ['1','2','3'],
occupation: 0,
desc: '你好',
},
methods: {
handle: function () {
console.log(this.uname);
console.log(this.gender);
console.log(this.hobby);
console.log(this.occupation);
console.log(this.desc)
}
}
});
</script>
</html>
二、表单域修饰符
1.number 转化为数值
<input type="text" v-model.number="age" />
2.trim 去掉开始和结尾的空格
<input type="text" v-model.trim="info" />
3.lazy: 将input事件切换为change事件 失去焦点
<input type="text" v-model.lazy="msg" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model.number="age" />
<input type="text" v-model.trim="info" />
<input type="text" v-model.lazy="msg" />
<div>{{msg}}</div>
<button v-on:click="handle">点击</button>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" >
/*
3.表单域修饰符
1.number 转化为数值
<input type="text" v-model.number="age" />
2.trim 去掉开始和结尾的空格
<input type="text" v-model.trim="info" />
3.lazy: 将input事件切换为change事件 失去焦点
<input type="text" v-model.lazy="msg" />
*/
var vm = new Vue({
el:'#app',
data:{
msg: "hello",
age: '',
info: '',
},
methods: {
handle: function () {
//console.log(this.age + 13)
console.log(this.info + '***' + this.info.length)
}
}
});
</script>
</html>