詳細(xì)分析vue表單數(shù)據(jù)的綁定
一、本節(jié)說(shuō)明
前面的章節(jié)我們學(xué)習(xí)了v-bind指定,可以通過(guò)模型數(shù)據(jù)去影響視圖。我們都知道VUE是支持雙向數(shù)據(jù)綁定的,那么視圖是如何影響數(shù)據(jù)的呢?那就要學(xué)到我們這一節(jié)的內(nèi)容v-model。v-model可以將表單輸入綁定到對(duì)應(yīng)的模型數(shù)據(jù)。
二、 怎么做
我們通過(guò)v-model實(shí)現(xiàn)一個(gè)簡(jiǎn)單的需求
通過(guò)表單input綁定模型數(shù)據(jù)message,表單數(shù)據(jù)變化data.message也發(fā)生變化然后通過(guò)Mustache表達(dá)式,將變化之后的message數(shù)據(jù)顯示到視圖頁(yè)面上
三、 效果
四、 深入
v-model實(shí)際上是一個(gè)語(yǔ)法糖,也就是簡(jiǎn)寫(xiě),他實(shí)際上包含了兩個(gè)操作:
v-bind綁定value屬性 v-on監(jiān)聽(tīng)表單元素的輸入事件,并改變數(shù)據(jù)所以,下面的兩種寫(xiě)法實(shí)現(xiàn)的效果是一致的。
一、本節(jié)說(shuō)明
在絕大多數(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é)我們來(lái)講解第一種方式實(shí)現(xiàn)的多選,及使用v-model指令數(shù)據(jù)綁定方法。
二、 怎么做
三、 效果(動(dòng)態(tài)圖片)
四、 深入
怎樣在單選或者多選選項(xiàng)顯示,默認(rèn)勾選一個(gè)或多個(gè)選項(xiàng)?只需要給定默認(rèn)初始化數(shù)據(jù)即可
瀏覽器效果:
一、本節(jié)說(shuō)明
上一節(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ù)的綁定。
二、 怎么做
三、 效果(動(dòng)態(tài)圖)
一、本節(jié)說(shuō)明
本節(jié)我們介紹一下在使用v-model指令進(jìn)行表單數(shù)據(jù)綁定的時(shí)候,常用的修飾符,修飾符會(huì)對(duì)指令功能起到補(bǔ)充和增強(qiáng)的作用。
二、 怎么做
三、 效果
以上就是詳細(xì)分析vue表單數(shù)據(jù)的綁定的詳細(xì)內(nèi)容,更多關(guān)于vue表單數(shù)據(jù)的綁定的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究2. 三個(gè)不常見(jiàn)的 HTML5 實(shí)用新特性簡(jiǎn)介3. Angular獲取ngIf渲染的Dom元素示例4. IIS+PHP添加對(duì)webp格式圖像的支持配置方法5. ASP調(diào)用WebService轉(zhuǎn)化成JSON數(shù)據(jù),附j(luò)son.min.asp6. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)7. 使用.net core 自帶DI框架實(shí)現(xiàn)延遲加載功能8. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報(bào)錯(cuò)問(wèn)題分析9. php測(cè)試程序運(yùn)行速度和頁(yè)面執(zhí)行速度的代碼10. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執(zhí)行過(guò)程解析
