VUE表单操作
2023-06-04 本文已影响0人
小黄不头秃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=" initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<form action="">
<div>
<span>姓名：</span>
<span>
<input type="text" v-model='uname'>
</span>
</div>
<div>
<span>性别：</span>
<span>
<input type="radio" id="male" value="0" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="1" 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 name="" id="" v-model="occupation" >
<option value="1">请选择职业……</option>
<option value="2">教师</option>
<option value="3">软件工程师</option>
<option value="4">律师</option>
</select> -->
<select name="" id="" v-model="occupation" multiple="multiple" size="4" @change="change">
<option value="1">请选择职业……</option>
<option value="2">教师</option>
<option value="3">软件工程师</option>
<option value="4">律师</option>
</select>
</div>
<div>
<span>个人简介：</span>
<textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
</div>
<div>
<input type="submit" value="提交" @click.prevent="handel">
</div>
</form>
<br>
<br>
<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 @click="handel1">submit</button>
</div>
<script src="./vue/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
age:"18",
uname:"李四",
gender:0,
hobby:['1','2','3'],
// occupation:1
occupation:['1','2','3','4'],
occupationID:"1",
text:"text",
info:"hahahaha",
msg:""
},
methods:{
handel:function(){
console.log(this.uname);
console.log(this.gender);
console.log(this.hobby+"");
console.log(this.occupationID);
console.log(this.text);
},
handel1:function(){
console.log(this.age+13);
console.log(this.info);
},
change:function(event){
this.occupationID = event.target.value;
console.log(event.target);
}
}
});
/**
* 表单域修饰符：
* - number 转换成数值
* - trim 去点开头结尾的空格
* - lazy 将input事件转变成change事件
* */
</script>
</body>
</html>
