Vue學(xué)習(xí)筆記之表單輸入控件綁定
更新時(shí)間：2017年09月05日 09:18:34 作者：哈希
本篇文章主要介紹了Vue學(xué)習(xí)筆記之表單輸入綁定，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
表單輸入綁定
基礎(chǔ)用法
文本
<input v-model:"msg" placeholder="edit me"/>
### 多行文本
<textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea>
### 復(fù)選框
愛好
<input type="checkbox" value="看電影" v-model="checked"/>
<input type="checkbox" value="打游戲" v-model="checked"/>
<input type="checkbox" value="音樂" 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: ''
},
選擇列表
單選列表
戶口
<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)沒有選中時(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)將用戶的輸入值轉(zhuǎn)為 Number 類型,可以添加一個(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ò)濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過(guò)濾輸入：
{{msg}}
<input type="text" v-model.lazy.trim:"msg"/>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue全局?jǐn)r截所有請(qǐng)求并在請(qǐng)求頭中添加token方式
這篇文章主要介紹了Vue全局?jǐn)r截所有請(qǐng)求并在請(qǐng)求頭中添加token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中的for循環(huán)以及自定義指令，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細(xì), 具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2023-11-11
這篇文章主要介紹了vue中下拉框組件的封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3.2(21年8月10日)相比于Vue3新增了語(yǔ)法糖,減少了代碼冗余,下面這篇文章主要給大家介紹了關(guān)于Vue3.2語(yǔ)法糖使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
解決vuex刷新狀態(tài)初始化的方法實(shí)現(xiàn)
這篇文章主要介紹了解決vuex刷新狀態(tài)初始化的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue2.0 自定義組件的方法（vue組件的封裝）,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-06-06
日歷在很多地方都可以使用的到，這篇文章主要介紹了如何利用vue3實(shí)現(xiàn)簡(jiǎn)單的日歷控件，文中通過(guò)示例代碼講解詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04