快捷導(dǎo)航

vue v-model的用法解析

更新時(shí)間：2020年10月19日 10:43:03 作者：字母哥博客

這篇文章主要介紹了v-model的基本用法解析，幫助大家更好的理解和學(xué)習(xí)vue v-model的使用方法，感興趣的朋友可以了解下

v-model的基本用法

一、本節(jié)說明

前面的章節(jié)我們學(xué)習(xí)了v-bind指定，可以通過模型數(shù)據(jù)去影響視圖。我們都知道VUE是支持雙向數(shù)據(jù)綁定的，那么視圖是如何影響數(shù)據(jù)的呢？那就要學(xué)到我們這一節(jié)的內(nèi)容v-model。v-model可以將表單輸入綁定到對(duì)應(yīng)的模型數(shù)據(jù)。

二、怎么做

我們通過v-model實(shí)現(xiàn)一個(gè)簡單的需求

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

三、效果

四、深入

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

v-bind綁定value屬性
v-on監(jiān)聽表單元素的輸入事件，并改變數(shù)據(jù)

所以，下面的兩種寫法實(shí)現(xiàn)的效果是一致的。

v-model綁定radio和checkbox

一、本節(jié)說明

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

第一種：input標(biāo)簽type=radio實(shí)現(xiàn)單選和type=checkbox實(shí)現(xiàn)的多選
第二種：select標(biāo)簽-option標(biāo)簽實(shí)現(xiàn)的單選與多選

這一節(jié)我們來講解第一種方式實(shí)現(xiàn)的多選，及使用v-model指令數(shù)據(jù)綁定方法。

二、怎么做

使用radio實(shí)現(xiàn)單選，v-model綁定的數(shù)據(jù)應(yīng)該是同一個(gè)，這樣實(shí)現(xiàn)單選選項(xiàng)之間的互斥
使用checkbox實(shí)現(xiàn)多選，v-model綁定的數(shù)據(jù)應(yīng)該是同一個(gè)，這樣多選的數(shù)據(jù)才屬于同一個(gè)數(shù)組

三、效果（動(dòng)態(tài)圖片）

四、深入

怎樣在單選或者多選選項(xiàng)顯示，默認(rèn)勾選一個(gè)或多個(gè)選項(xiàng)？只需要給定默認(rèn)初始化數(shù)據(jù)即可

瀏覽器效果：

v-model綁定select

一、本節(jié)說明

上一節(jié)我們使用v-model指令，綁定input標(biāo)簽type=radio和type=checkbox，分別實(shí)現(xiàn)了單選和多選的視圖向模型數(shù)據(jù)的綁定。這一節(jié)我們使用select標(biāo)簽和option標(biāo)簽，結(jié)合v-model實(shí)現(xiàn)單選和多選的視圖向模型數(shù)據(jù)的綁定。

二、怎么做

v-model綁定模型數(shù)據(jù)mvp，實(shí)現(xiàn)單選效果
v-model綁定模型數(shù)據(jù)allDefensiveTeam，結(jié)合multiple屬性實(shí)現(xiàn)多選效果
多選選項(xiàng)的模型數(shù)據(jù)為數(shù)組類型
可以為單選及多選設(shè)置默認(rèn)值，即：默認(rèn)的勾選項(xiàng)

三、效果（動(dòng)態(tài)圖）

v-model的修飾符

一、本節(jié)說明

本節(jié)我們介紹一下在使用v-model指令進(jìn)行表單數(shù)據(jù)綁定的時(shí)候，常用的修飾符，修飾符會(huì)對(duì)指令功能起到補(bǔ)充和增強(qiáng)的作用。

二、怎么做

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

三、效果

由上圖可以看到，當(dāng)?shù)谝粋€(gè)輸入框失去焦點(diǎn)的時(shí)候，name：curry，才發(fā)生數(shù)據(jù)改變。
輸入年齡31，被當(dāng)作數(shù)值類型處理（默認(rèn)輸入是當(dāng)作字符串類型。因?yàn)槌跏贾禐閚ull，所以顯示是object類型）
第三個(gè)輸入框，輸入內(nèi)容前后都有空格，但是加上trim修飾符，就自動(dòng)去掉了。