成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.js的v-model(表單輸入)

Tikitoo / 3040人閱讀

摘要：表單輸入綁定基礎(chǔ)用法我們可以利用指令來實現(xiàn)數(shù)據(jù)與模版的雙向綁定它會根據(jù)控件類型自動選取正確的方法來更新元素。會忽略所有表單元素的特性的初始值。如果要自動過濾用戶輸入的首尾空格，可以添加修飾符到上過濾輸入

表單輸入綁定 基礎(chǔ)用法

我們可以利用 v-model 指令來實現(xiàn)數(shù)據(jù)與模版的雙向綁定,它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖，它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并特別處理一些極端的例子。

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值。因為它會選擇 Vue 實例數(shù)據(jù)來作為具體的值。你應(yīng)該通過 JavaScript 在組件的 data 選項中聲明初始值。
文本 

    
{{msg}}

    

var vm = new Vue({
    el:"#box",
    data:{
        msg:"hi girl"
    }
})

結(jié)果

多行文本 

    
{{msg}}

    

var vm = new Vue({
    el:"#box",
    data:{
        msg:"hi girl"
    }
})

結(jié)果

復(fù)選框 

    

var vm = new Vue({
    el:"#box",
    data:{
        msg:true
    }
})

結(jié)果

單選 

    
    
    

    
    
    

    Picked: {{ picked }}

var vm = new Vue({
    el:"#box",
    data:{
        picked:""
    }
})

結(jié)果

選擇列表 

    
    Selected: {{ selected }}

var vm = new Vue({
    el:"#box",
    data:{
        selected: ""
    }
})

結(jié)果

如果 v-model 表達(dá)初始的值不匹配任何的選項，< select > 元素就會以”未選中”的狀態(tài)渲染。在 iOS 中，這會使用戶無法選擇第一個選項，因為這樣的情況下，iOS 不會引發(fā) change 事件。因此，像以上提供 disabled 選項是建議的做法。
多選列表（綁定到一個數(shù)組）：

    
    

    Selected: {{ selected }}

var vm = new Vue({
    el:"#box",
    data:{
        selected: []
    }
})

結(jié)果

綁定 value

對于單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態(tài)字符串（對于勾選框是邏輯值）：







但是有時我們想綁定 value 到 Vue 實例的一個動態(tài)屬性上，這時可以用 v-bind 實現(xiàn)，并且這個屬性的值可以不是字符串。
復(fù)選框 
// 當(dāng)選中時
vm.toggle === vm.a
// 當(dāng)沒有選中時
vm.toggle === vm.b
單選按鈕 
// 當(dāng)選中時
vm.pick === vm.a
選擇列表設(shè)置 
// 當(dāng)選中時
typeof vm.selected // => "object"
vm.selected.number // => 123
修飾符

.lazy

.number

.trim

.lazy

在默認(rèn)情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù) (除了 上述 IME 部分)，但你可以添加一個修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步：
.number

如果想自動將用戶的輸入值轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：

這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型。
.trim

如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87429.html

相關(guān)文章

  • Vue.js-表單與v-model

    摘要：學(xué)習(xí)筆記表單與表單與提供了指令，用于在表單類元素上雙向綁定數(shù)據(jù)。事實上，也是一個特殊的語法糖，只不過它會在不同的表單上智能處理。選擇的項復(fù)選框復(fù)選框單獨使用時，也是用綁定一個布爾值。復(fù)選框選擇列表當(dāng)選中時，是一個，所以。 學(xué)習(xí)筆記：表單與v-model 表單與v-model Vue.js提供了v-model指令，用于在表單類元素上雙向綁定數(shù)據(jù)。 使用v-model后，表單控件顯示的值...

    jollywing 評論0 收藏0

  • Vue.js第八課 表單

    摘要：你可以用指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。會根據(jù)控件類型自動選取正確的方法來更新元素。如果要自動過濾用戶輸入的首尾空格，可以添加修飾符到上過濾輸入 這節(jié)我們?yōu)榇蠹医榻B Vue.js 表單上的應(yīng)用。 你可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。showImg(https://segmentfault.com/img/bVOfeD?w=700&h=372); v-m...

    weizx 評論0 收藏0

  • Vue.js組件中v-model的使用

    摘要：在中，經(jīng)常會使用實現(xiàn)表單的雙向數(shù)據(jù)綁定功能。使用組件時，組件庫中的含有輸出類型的自定義組件，都會使用指令，該指令綁定的元素就是組件的輸出結(jié)果。 在 Vue.js 中，經(jīng)常會使用 v-model 實現(xiàn)表單的雙向數(shù)據(jù)綁定功能。 使用 Element 組件時，組件庫中的含有輸出類型的自定義組件，都會使用v-model指令，該指令綁定的元素就是組件的輸出結(jié)果。比如 select選擇器 show...

    calx 評論0 收藏0

  • 手把手教你學(xué)Vue-1(vue指令)

    摘要：方法用來新增對象的屬性模版指令不是字符串模版渲染，所以需要用來渲染菜鳥教程屬性中的值應(yīng)使用指令縮寫方式。 最近因為要重構(gòu)APP項目，在對比了react和Vue，加上前期已經(jīng)有了react開發(fā)的經(jīng)驗，還是想嘗試一下VUE，更小更便捷的開發(fā)方式。 1.vue 初始化安裝官網(wǎng)提供的NPM方法 $ npm install vue # 全局安裝 vue-cli $ npm install ...

    LucasTwilight 評論0 收藏0

發(fā)表評論

0條評論

Tikitoo

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<