Vue學(xué)習(xí)筆記之表單輸入控件綁定
表單輸入綁定
基礎(chǔ)用法
文本
<input v-model:"msg" placeholder="edit me"/>
### 多行文本
<textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea>
### 復(fù)選框
愛(ài)好
<input type="checkbox" value="看電影" v-model="checked"/>
<input type="checkbox" value="打游戲" v-model="checked"/>
<input type="checkbox" value="音樂(lè)" v-model="checked"/>
{{ checked }}
var vm=new Vue({
el:'#app',
date:{
checked:[]
},
單選按鈕
性別
<input type="radio" value="男" v-model="picked"/>男
<input type="radio" value="女" v-model="picked"/>女
{{picked}}
var vm=new Vue({
el:'#app',
date:{
picked: ''
},
選擇列表
單選列表
戶(hù)口
<select v-model="selected">
<option disabled value="">請(qǐng)選擇</option>
<option>河北</option>
<option>山西</option>
<option>北京</option>
</select>
{{ selected }}
var vm=new Vue({
el:'#app',
date:{
selected:'',
},
多選列表(綁定到一個(gè)數(shù)組):
<div id="example-6">
<select v-model="selected" multiple style="width: 50px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
綁定 value
對(duì)于單選按鈕,勾選框及選擇列表選項(xiàng), v-model 綁定的 value 通常是靜態(tài)字符串(對(duì)于勾選框是邏輯值):
<!-- 當(dāng)選中時(shí),`picked` 為字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 為 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 當(dāng)選中時(shí),`selected` 為字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
復(fù)選框
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b" > // 當(dāng)選中時(shí) vm.toggle === vm.a // 當(dāng)沒(méi)有選中時(shí) vm.toggle === vm.b
單選按鈕
<input type="radio" v-model="pick" v-bind:value="a"> // 當(dāng)選中時(shí) vm.pick === vm.a
選擇列表設(shè)置
<select v-model="selected">
<!-- 內(nèi)聯(lián)對(duì)象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 當(dāng)選中時(shí)
typeof vm.selected // => 'object'
vm.selected.number // => 123
修飾符
.lazy
在默認(rèn)情況下, v-model 在 input 事件中同步輸入框的值與數(shù)據(jù) (除了 上述 IME 部分),但你可以添加一個(gè)修飾符 lazy ,從而轉(zhuǎn)變?yōu)樵?change 事件中同步:
{{msg}}
<input type="text" v-model.lazy:"msg"/>
.number
如果想自動(dòng)將用戶(hù)的輸入值轉(zhuǎn)為 Number 類(lèi)型,可以添加一個(gè)修飾符 number 給 v-model 來(lái)處理輸入值:
{{num1}}
<input type="text" v-model.number:"num1"/>
{{num2}}
<input type="text" v-model.number:"num2"/>
{{num1+num2}}
var vm=new Vue({
date:{
num1:1,
num2:1
},
});
.trim
如果要自動(dòng)過(guò)濾用戶(hù)輸入的首尾空格,可以添加 trim 修飾符到 v-model 上過(guò)濾輸入:
{{msg}}
<input type="text" v-model.lazy.trim:"msg"/>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
webpack dev-server代理websocket問(wèn)題
這篇文章主要介紹了webpack dev-server代理websocket問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.$set 失效的坑 問(wèn)題發(fā)現(xiàn)及解決方案
這篇文章主要介紹了Vue.$set 失效的坑 問(wèn)題發(fā)現(xiàn)及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07
Vue使用視頻作為網(wǎng)頁(yè)背景的實(shí)現(xiàn)指南
在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中,視頻背景逐漸成為一種流行的設(shè)計(jì)趨勢(shì),它不僅能夠提升網(wǎng)頁(yè)的動(dòng)態(tài)效果,還可以在視覺(jué)上抓住用戶(hù)的注意力,本文將詳細(xì)講解如何在頁(yè)面中使用視頻作為背景,并確保內(nèi)容可見(jiàn)、頁(yè)面元素布局合理,需要的朋友可以參考下2024-10-10
詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問(wèn)題解決方案
這篇文章主要介紹了詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問(wèn)題解決方案,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09
Vue 進(jìn)入/離開(kāi)動(dòng)畫(huà)效果
這篇文章主要介紹了Vue 進(jìn)入/離開(kāi)動(dòng)畫(huà)效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
基于VUE移動(dòng)音樂(lè)WEBAPP跨域請(qǐng)求失敗的解決方法
這篇文章主要介紹了基于VUE移動(dòng)音樂(lè)WEBAPP跨域請(qǐng)求失敗的解決方法,需要的朋友可以參考下2018-01-01

