Vue基礎篇-表單雙向繫結
阿新 • • 發佈:2018-12-12
1.基本應用
(a)輸入框(input),文字域(textarea)
<div id="app">
<input v-model="message"/>
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '輸入框內容'
}
})
</script>
(b)複選框(type='checkbox')
<div id="app"> <p>單個複選框:</p> <input type="checkbox" v-model="checked"> <p>多個複選框:</p> <input type="checkbox" value="val001" v-model="checkedNames"> <input type="checkbox" value="val002" v-model="checkedNames"> <input type="checkbox" value="val003" v-model="checkedNames"> </div> <script> new Vue({ el: '#app', data: { checked : true, //單複選框初始化-選中 checkedNames: [] //多複選框初始化-都不選中 } }) </script>
(c)單選按鈕(type='radio')
<div id="app"> <input type="radio" value="val001" v-model="picked"> <br> <input type="radio" value="val002" v-model="picked"> <br> <span>選中值為: {{ picked }}</span> </div> <script> new Vue({ el: '#app', data: { picked : 'val001' //第一個單選按鈕初始化為選中狀態 } }) </script>
(d)下拉選單(select)
<div id="app"> <select v-model="selected"> <option value="0">0000</option> <option value="1">1111</option> <option value="2">2222</option> </select> <p>選擇的是: {{selected}} </p> </div> <script> new Vue({ el: '#app', data: { selected: '2' //初始化-選擇value=2的選項 } }) </script>
2.雙向繫結修飾符
(a).lazy (轉變同步事件)
預設情況下, v-model 在 input 事件中同步輸入框的值與資料,新增一個修飾符 lazy ,轉變為在 change 事件中同步。
<input v-model.lazy="msg" >
(b).number (格式化輸入值為數字型別,一般用於type=‘number’中)
將使用者的輸入值轉為 Number 型別(原值的轉換結果為 NaN 則返回原值),可以新增一個修飾符 number 。
<input v-model.number="age" type="number">
(c).trim (去除收尾空格)
自動過濾使用者輸入的首尾空格(中間空格無法處理),可以新增 trim 修飾符到 v-model 上過濾輸入。
<input v-model.trim="msg" value=" 收尾空格不會輸出 ">
3.常用場景(待補充)
場景一:全選&取消全選
<div id="app">
<input type="checkbox" v-model="checked" @change="changeAllChecked()">{{checked}}
<br/>
<input type="checkbox" value="val001" v-model="checkedNames">val001
<input type="checkbox" value="val002" v-model="checkedNames">val002
<input type="checkbox" value="val003" v-model="checkedNames">val003
<br/>
<span>
選擇的值為:{{checkedNames}}
</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false,
checkedNames: [],
checkedArr: ["val001", "val002", "val003"]
},
methods: {
changeAllChecked: function() {
if (this.checked) {
this.checkedNames = this.checkedArr
} else {
this.checkedNames = []
}
}
},
watch: {
"checkedNames": function() {
if (this.checkedNames.length == this.checkedArr.length) {
this.checked = true
} else {
this.checked = false
}
}
}
})
</script>
場景二:表單校驗
<div id="app">
<input v-model.trim="val" @keydown="changeInput()"/>
//監聽輸入框變化最好不要用change,可能會無效
<span style="color:red"> {{msg}} </span>
</div>
<script>
new Vue({
el:"#app",
data:{
val:"",
msg:"此為必填項!"
},
methods:{
changeInput:function(){
if(String(this.val).length==0){
this.msg="此為必填項!"
}else{
this.msg=""
}
}
}
})
</script>