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

Tikitoo 發布于2019-08-21 12:05 / 3032人閱讀

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

表單輸入綁定 基礎用法

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

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

文本


    {{msg}}

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

結果

多行文本


    {{msg}}

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

結果

復選框

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

結果

單選


    
    One
    

    
    Two
    

    Picked: {{ picked }}

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

結果

選擇列表


    
    Selected: {{ selected }}

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

結果

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


    
    

    Selected: {{ selected }}

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

結果

綁定 value

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

但是有時我們想綁定 value 到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，并且這個屬性的值可以不是字符串。

復選框

// 當選中時
vm.toggle === vm.a
// 當沒有選中時
vm.toggle === vm.b

單選按鈕

// 當選中時
vm.pick === vm.a

選擇列表設置

// 當選中時
typeof vm.selected // => "object"
vm.selected.number // => 123

修飾符

.lazy

.number

.trim

.lazy

在默認情況下， v-model 在 input 事件中同步輸入框的值與數據 (除了上述 IME 部分)，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：

.number

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

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

.trim

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

GPU云服務器云服務器 js獲取輸入的表單數據格式 js獲取輸入的表單數據格式化表單輸入表單輸入框

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

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

Vue.js-表單與v-model

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

jollywing 2019-08-23 16:02 評論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
手把手教你學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