Vue學習筆記之表單輸入控件綁定
更新時間：2017年09月05日 09:18:34 作者：哈希
本篇文章主要介紹了Vue學習筆記之表單輸入綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
表單輸入綁定
基礎(chǔ)用法
文本
<input v-model:"msg" placeholder="edit me"/>
### 多行文本
<textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea>
### 復選框
愛好
<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="">請選擇</option>
<option>河北</option>
<option>山西</option>
<option>北京</option>
</select>
{{ selected }}
var vm=new Vue({
el:'#app',
date:{
selected:'',
},
多選列表（綁定到一個數(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
對于單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態(tài)字符串（對于勾選框是邏輯值）：
<!-- 當選中時，`picked` 為字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 為 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 當選中時，`selected` 為字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
復選框
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b" > // 當選中時 vm.toggle === vm.a // 當沒有選中時 vm.toggle === vm.b
單選按鈕
<input type="radio" v-model="pick" v-bind:value="a"> // 當選中時 vm.pick === vm.a
選擇列表設(shè)置
<select v-model="selected">
<!-- 內(nèi)聯(lián)對象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 當選中時
typeof vm.selected // => 'object'
vm.selected.number // => 123
修飾符
.lazy
在默認情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù) (除了 上述 IME 部分)，但你可以添加一個修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步：
{{msg}}
<input type="text" v-model.lazy:"msg"/>
.number
如果想自動將用戶的輸入值轉(zhuǎn)為 Number 類型,可以添加一個修飾符 number 給 v-model 來處理輸入值：
{{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
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
{{msg}}
<input type="text" v-model.lazy.trim:"msg"/>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案
這篇文章主要介紹了Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
Vue使用視頻作為網(wǎng)頁背景的實現(xiàn)指南
在現(xiàn)代網(wǎng)頁設(shè)計中,視頻背景逐漸成為一種流行的設(shè)計趨勢,它不僅能夠提升網(wǎng)頁的動態(tài)效果,還可以在視覺上抓住用戶的注意力,本文將詳細講解如何在頁面中使用視頻作為背景,并確保內(nèi)容可見、頁面元素布局合理,需要的朋友可以參考下2024-10-10
本文主要介紹，通過使用基于 vue技術(shù)棧的前端開發(fā)技術(shù)，在瀏覽器端調(diào)起攝像頭，并進行掃碼識別功能，對識別到的二維碼進行跳轉(zhuǎn)或其他操作處理，對vue瀏覽器掃碼功能的實現(xiàn)代碼感興趣的朋友一起看看吧2021-10-10
詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案
這篇文章主要介紹了詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案，非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue 進入/離開動畫效果，代碼簡單易懂，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
vue3.0 beta 版本已經(jīng)發(fā)布有一段時間了，今天這篇文章就帶大家體驗一下，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了基于VUE移動音樂WEBAPP跨域請求失敗的解決方法,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了Vue中的單向數(shù)據(jù)流原則,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03