Vue.js-表單與v-model

jollywing 發布于2019-08-23 16:02 / 1865人閱讀

摘要：學習筆記表單與表單與提供了指令，用于在表單類元素上雙向綁定數據。事實上，也是一個特殊的語法糖，只不過它會在不同的表單上智能處理。選擇的項復選框復選框多帶帶使用時，也是用綁定一個布爾值。復選框選擇列表當選中時，是一個，所以。

學習筆記：表單與v-model

表單與v-model

Vue.js提供了v-model指令，用于在表單類元素上雙向綁定數據。

使用v-model后，表單控件顯示的值只依賴所綁定的數據，不再關心初始化時的value屬性，對于在之間插入的值，也不會生效。

使用v-model時，如果是用中文輸入法輸入中文，一般在沒有選定詞組前，也就是在拼音階段，Vue時不會更新數據的，當敲下漢字時才會觸發更新。

如果希望總是實時更新，可以用@input替代v-model。事實上，v-model也是一個特殊的語法糖，只不過它會在不同的表單上智能處理。

單選按鈕

單選按鈕在多帶帶使用時，不需要v-model，直接使用v-bind把你當一個布爾類型的值，為真時選中，為否時不選。


    
    單選按鈕

如果是組合使用來實現互斥選擇的效果，就需要v-model配合value來使用。


    
        
        HTML
    
    
        
        JavaScript
    
    
        
        CSS
    
    選擇的項：{{picked}}

復選框

復選框多帶帶使用時，也是用v-model綁定一個布爾值。

組合使用時，也是v-model與value一起，多個勾選框都綁定到同一個數組類型的數據，value的值在數組中，就會選中這一項。這一過程也是雙向的，在勾選時value得知也會自動push到這個數組中。

選擇列表

選擇列表就是下來選擇器，分為單選和多選兩種方式。

在業務中，經常用v-for動態輸出，value和text也是用v-bind動態輸出。

綁定值

在業務中，有時需要綁定一個動態的數據，這時可以使用v-bind實現。

單選按鈕


    
    {{picked}}
    {{value}}


data: {
    picked: false,
    value: 123
},

在選中時，app.picked===app.value，值都是123。

復選框


    
    {{toggle}}
    {{value1}}
    {{value2}}

選擇列表


    
    {{selected.number}}

當選中時，app.selected是一個Object，所以app.selected.number===123。

修飾符

與事件的修飾符類似，v-model也有修飾符，用于控制數據同步的時機。

.lazy

在輸入框中，v-model默認是在input事件中同步輸入框的數據，使用修飾符.lazy會轉變為在change事件中同步。


    
    {{message}}

這時，message并不是實時變化，而是在失焦或按回車鍵時才更新。

.number

使用修飾符.number可以將輸入轉換成Number類型，否則輸入的數字，但它的類型其實是String，在數字輸入框時比較有用。


    
    {{typeof message}}

.trim

修飾符.trim可以自動過濾輸入的首尾空格。

GPU云服務器云服務器 Vue.js vue.js 屬性 vue.js自學 cdn vue.js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102639.html

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

摘要：表單輸入綁定基礎用法我們可以利用指令來實現數據與模版的雙向綁定它會根據控件類型自動選取正確的方法來更新元素。會忽略所有表單元素的特性的初始值。如果要自動過濾用戶輸入的首尾空格，可以添加修飾符到上過濾輸入表單輸入綁定基礎用法我們可以利用 v-model 指令來實現數據與模版的雙向綁定,它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖...

Tikitoo 2019-08-21 12:05 評論0 收藏0
Vue.js第八課表單

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

weizx 2019-06-27 16:36 評論0 收藏0
Vue.js組件中v-model的使用

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

calx 2019-08-21 15:49 評論0 收藏0
iView2 來了，全面支持 Vue.js 2.x

摘要：來了兩個星期的緊張開發，終于發布了支持的版本。整體性能也大幅度提升。報名費用元，報名地址微信掃描二維碼更新日志目前已發布至，文檔還需一段時間，但很快會發布新版本的來支持。 showImg(https://segmentfault.com/img/remote/1460000008640063?w=1600&h=900); iView2 來了兩個星期的緊張開發，iView 終于發布了支...

YFan 2019-08-21 11:34 評論0 收藏0
手把手教你學Vue-1(vue指令)

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

LucasTwilight 2019-08-22 15:47 評論0 收藏0