基于Vue的表单操作
input
单行文本textarea
多行文本select
下拉多选radio
单选框checkbox
多选框
示例效果如下:
input
单行文本与textarea
多行文本类似,使用v-model
数据绑定
select
下拉
(1)单个下拉选项
在每个option
中添加<option value="0"></option>
,不同的value值,select 中添加<select v-model="occupation" >
,data中添加数组,occupation:['1']
,即要将相对应的value值设为默认选项
(2) 多个下拉选项
multiple
设为多选,<select v-model="occupation" multiple="true">
样式高度设为自动,form div:nth-child(4){ height: auto; }
,dataoccupation:['1', '2']
,即可实现默认选择两个
radio
单选框
设置不同的value,<input type="radio" id="male" value="1" v-model="gender">
,使用v-model
数据绑定
checkbox
多选框
设置相应的value,<input type="checkbox" id="ball" value="1" v-model="hobby">
,使用v-model
数据绑定,可以是单个,hobby:['2']
也可以是多个hobby:['1', '2']
<style>
form div span{
display: inline-block;
width: 100px;
}
form{
padding: 5px;
font-size: 20px;
width: 350px;
border: black solid 3px;
}
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>
<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>
<select v-model="occupation" multiple="true">
<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="提交" @click.prevent="handle">
</div>
</form>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
uname:"lisa",
gender:1,
hobby:['2'],
occupation:['1'],
desc:"werferfgvaf"
},
methods:{
handle: function(){
console.log(this.uname);
}
}
})
</script>
</body>
表单或修饰符
number
:转化为数值trim
:去掉开始和结尾的空格
<div id="app">
<!--v-model.number,将文本输入的字符串直接转化为数值-->
<input type="text" v-model.number="age">
<!--v-model.number,将文本输入的字符串去掉开始和结尾的空格-->
<input type="text" v-model.trim="info">
<button @click='handle'>点击</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
age:'',
info:''
},
methods:{
handle:function(){
console.log("age:"+this.age + 13);
console.log("info长度:"+this.info.length );
}
}
})
</script>
lazy
:将input事件切换为change事件(用户注册:用户名被占用时,失去焦点才进行验证)