一、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>