一、form表单操作
1 基于表单的基本操作
input单行文本(绑定一个数据即可)
textarea多行文本(绑定一个数据即可)
<input type="text" v-model="name">
<textarea v-model="textArea"></textarea>
radio单选框(绑定同一个数据)
<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>
checkbox多选框(绑定统一个数据(数组形式))
<input type="checkbox" id="ball" value="1" v-model="like">
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="like">
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="like">
<label for="code">写代码</label>
select下拉框(select绑定一个数据即可,下拉多选select添加multiple=“true”,绑定一个数组数据)
<span>职业:</span>
<!-- select绑定一个数据 -->
<select v-model="job">
<option value="0">请选择职业..</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
<span>职业多选:</span>
<!-- multiple="true"设置select多选,select绑定一个数组 -->
<select v-model="job2" multiple="true">
<option value="0">请选择职业..</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
完整例子:
<div id="app">
<div>
<span>姓名:</span>
<!-- input绑定一个数据 -->
<input type="text" v-model="name">
</div>
<div>
<span>性别:</span>
<!-- input绑定一个数据 -->
<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>
</div>
<div>
<span>爱好:</span>
<!-- input绑定一个数组 -->
<input type="checkbox" id="ball" value="1" v-model="like">
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="like">
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="like">
<label for="code">写代码</label>
</div>
<div>
<span>职业:</span>
<!-- select绑定一个数据 -->
<select v-model="job">
<option value="0">请选择职业..</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
<span>职业多选:</span>
<!-- multiple="true"设置select多选,select绑定一个数组 -->
<select v-model="job2" multiple="true">
<option value="0">请选择职业..</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
<div>
<span>个人介绍:</span>
<!-- textarea绑定一个数据 -->
<textarea v-model="textArea"></textarea>
</div>
<button @click="handel">提交</button>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
name:"",
gender:"",
like:[],
job:"0",
job2:[],
textArea:""
},
methods:{
handel:function () {
alert(this.name+""+this.gender+""+this.like+""+this.job+""+this.job2+""+this.textArea);
}
}
})
</script>
表单域修饰符
.number :使得输入的数据转化为数值
<input type="text" v-model.number="num2">
<div id="app">
<div>
<input type="text" v-model="num1">
<button @click="handel">+13</button>
{{num1}}
</div>
<div>
<input type="text" v-model.number="num2">
<button @click="handel2">+13</button>
{{num2}}
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
num1:'',
num2:'',
},
methods:{
handel:function () {
this.num1 = this.num1 +13;
},
handel2:function () {
this.num2 = this.num2 +13;
}
}
})
</script>
.trim:去掉开始和结尾的空格
<div id="app">
<div>
<input type="text" v-model="num1">
"{{num1}}"
</div>
<div>
<input type="text" v-model.trim="num2">
"{{num2}}"
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
num1:'',
num2:'',
}
})
</script>
.lazy:将input事件切换为chenge事件(绑定的数据不会随时变化,会等到你的鼠标焦点离开输入框同步数据)
<input type="text" v-model.lazy="num2">
<div id="app">
<div>
<input type="text" v-model="num1">
"{{num1}}"
</div>
<div>
<input type="text" v-model.lazy="num2">
"{{num2}}"
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
num1:'',
num2:'',
}
})
</script>