詳細分析vue表單數據的綁定

v-model的基本用法

一、本節說明

前面的章節我們學習了v-bind指定，可以通過模型數據去影響視圖。我們都知道VUE是支持雙向數據綁定的，那么視圖是如何影響數據的呢？那就要學到我們這一節的內容v-model。v-model可以將表單輸入綁定到對應的模型數據。

二、 怎么做

我們通過v-model實現一個簡單的需求

通過表單input綁定模型數據message，表單數據變化data.message也發生變化然后通過Mustache表達式，將變化之后的message數據顯示到視圖頁面上

三、 效果

四、 深入

v-model實際上是一個語法糖，也就是簡寫，他實際上包含了兩個操作：

v-bind綁定value屬性 v-on監聽表單元素的輸入事件，并改變數據

所以，下面的兩種寫法實現的效果是一致的。

v-model綁定radio和checkbox

一、本節說明

在絕大多數的表單操作中，我們不只要收集文本輸入的數據，我們還可能用到單選和多選。通常，實現單選和多選有以下的方式：

第一種：input標簽type=radio實現單選和type=checkbox實現的多選 第二種：select標簽-option標簽實現的單選與多選

這一節我們來講解第一種方式實現的多選，及使用v-model指令數據綁定方法。

二、 怎么做

使用radio實現單選，v-model綁定的數據應該是同一個，這樣實現單選選項之間的互斥 使用checkbox實現多選，v-model綁定的數據應該是同一個，這樣多選的數據才屬于同一個數組

三、 效果（動態圖片）

四、 深入

怎樣在單選或者多選選項顯示，默認勾選一個或多個選項？只需要給定默認初始化數據即可

瀏覽器效果：

v-model綁定select

一、本節說明

上一節我們使用v-model指令，綁定input標簽type=radio和type=checkbox，分別實現了單選和多選的視圖向模型數據的綁定。這一節我們使用select標簽和option標簽，結合v-model實現單選和多選的視圖向模型數據的綁定。

二、 怎么做

v-model綁定模型數據mvp，實現單選效果 v-model綁定模型數據allDefensiveTeam，結合multiple屬性實現多選效果 多選選項的模型數據為數組類型 可以為單選及多選設置默認值，即：默認的勾選項

三、 效果（動態圖）

v-model的修飾符

一、本節說明

本節我們介紹一下在使用v-model指令進行表單數據綁定的時候，常用的修飾符，修飾符會對指令功能起到補充和增強的作用。

二、 怎么做

lazy修飾符：默認情況下，input輸入會實時影響v-model綁定的數據。加上lazy修飾符，只有當輸入框失去焦點會輸入回車的時候，才會去改變v-model綁定的數據。 number修飾符：默認情況下，輸入框中輸入的無論是數字還是字母，都會被當做字符串處理。加上number修飾符，輸入內容會被當做數值類型處理。 trim修飾符：可以自動去掉輸入內容左右兩邊的空格

三、 效果

由上圖可以看到，當第一個輸入框失去焦點的時候，name：curry，才發生數據改變。 輸入年齡31，被當作數值類型處理（默認輸入是當作字符串類型。因為初始值為null，所以顯示是object類型） 第三個輸入框，輸入內容前后都有空格，但是加上trim修飾符，就自動去掉了。

以上就是詳細分析vue表單數據的綁定的詳細內容，更多關于vue表單數據的綁定的資料請關注好吧啦網其它相關文章！