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表單資料的繫結的資料請關注我們其它相關文章！