真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

 
 
輸入的內(nèi)容是：{{message}}

 
 
輸入的內(nèi)容是：{{message}}

來(lái)看看更多的表單控件。

單選按鈕：

單選按鈕在單獨(dú)使用時(shí)，不需要v-model，直接使用v-bind綁定一個(gè)布爾類(lèi)型的值，為true時(shí)選中，為false時(shí)不選。
 例如：

 
 單選按鈕

如果是組合使用來(lái)實(shí)現(xiàn)互斥選擇的效果，就需要v-model配合value來(lái)使用：

 
 HTML
 
 
 JavaScript
 
 
 CSS
 
 
您選擇的是：{{picked}}

數(shù)據(jù)picked的值與表單按鈕的value值一致時(shí)，就會(huì)選中該項(xiàng)，所以當(dāng)前狀態(tài)下選中的是第二項(xiàng)。
 如圖6-2所示：

復(fù)選框：

復(fù)選框也分單獨(dú)使用和組合使用，不過(guò)用法稍與單選不同。

 復(fù)選框單獨(dú)使用時(shí)，也是用v-model來(lái)綁定一個(gè)布爾值。

 例如：

 
 選擇狀態(tài)：{{checked}}

在勾選時(shí)，數(shù)據(jù)checked的值改為了true，中渲染的內(nèi)容也會(huì)更新。

組合使用時(shí)，也是v-model與value一起，多個(gè)勾選框都綁定到同一個(gè)數(shù)組類(lèi)型的數(shù)據(jù)，value的值在數(shù)據(jù)當(dāng)中，就會(huì)選中這一項(xiàng)。

 這一過(guò)程也是雙向的，在勾選時(shí)，value的值也會(huì)自動(dòng)push到這個(gè)數(shù)組中。

 實(shí)例代碼如下：

 
 HTML
 

 
 JavaScript
 

 
 CSS
 

 
你選擇的是：{{checked}}

當(dāng)前狀態(tài)下的結(jié)果如圖6-3所示：

選擇列表：

選擇列表就是下拉選擇器，也是常見(jiàn)的表單控件，同樣也分為單選和多選兩種方式。
 先看一下單選的示例代碼：

 
 html
 JavaScript
 css
 
 
你選擇的是：{{selected}}

是備選項(xiàng)，如果含有value屬性，v-model就會(huì)優(yōu)先匹配value的值； 

如果沒(méi)有，就會(huì)直接匹配的text。

 比如選中第二項(xiàng)時(shí)，selected的值為js，而不是JavaScript。

給添加屬性multiple就可以多選了，此時(shí)v-model綁定的是一個(gè)數(shù)組，與復(fù)選框用法類(lèi)似。
 實(shí)例代碼如下：

 
 html
 JavaScript
 css
 

 

你選擇的是：{{selected}}

在業(yè)務(wù)中，經(jīng)常用v-for動(dòng)態(tài)輸出，value和text也是用v-bind來(lái)動(dòng)態(tài)輸出的。
 例如：

 
 {{item.text}}
 
 
你選擇的是：{{selected}}

雖然用選擇列表控件可以很簡(jiǎn)單地完成下拉選擇的需求，但是在實(shí)際業(yè)務(wù)中反而不常用，因?yàn)樗臉邮揭蕾?lài)平臺(tái)和瀏覽器，無(wú)法統(tǒng)一，也不太美觀，功能也受限，，比如不支持搜索，所以常見(jiàn)的解決方案是用

moi一個(gè)類(lèi)似的控件。

 當(dāng)閱讀完第7章組件的內(nèi)容后，可以嘗試編寫(xiě)一個(gè)下拉選擇器的通用組件。

6.2 綁定值

上一節(jié)介紹的單選按鈕、復(fù)選框和選擇列表在單獨(dú)使用或單選的模式下，v-model綁定的值是一個(gè)靜態(tài)字符串或布爾值。
 但在業(yè)務(wù)中，有時(shí)需要綁定一個(gè)動(dòng)態(tài)的數(shù)據(jù)，這時(shí)可以用v-bind來(lái)實(shí)現(xiàn)。

單選按鈕：

 
 單選按鈕
 
{{picked}}
 
{{value}}

在選中時(shí)，app.picked===app.value，值都是123。

復(fù)選框：

 
 復(fù)選框
 
{{toggle}}
 
{{value1}}
 
{{value2}}

 勾選時(shí)，app.toggle===app.value1；

 未勾選時(shí)，app.toggle===app.value2。

選擇列表：

 
 123
 

 {{selected.number}}

 當(dāng)選中時(shí)，app.selected是一個(gè)Object，所以app.selected.number===123。

6.3 修飾符

與事件的修飾符類(lèi)似，v-model也有修飾符，用于控制數(shù)據(jù)同步的時(shí)機(jī)。

.lazy：

在輸入框中，v-model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)(除了提示中介紹的中文輸入法情況外)。

 使用修飾符.lazy會(huì)轉(zhuǎn)變?yōu)樵赾hange事件中同步，示例代碼如下：

 
 
{{message}}

 這是，message并不是實(shí)時(shí)改變的，而是在失焦或按回車(chē)時(shí)才更新。

.number：

使用修飾符.number可以將輸入轉(zhuǎn)換為Number類(lèi)型，否則雖然你輸入的是數(shù)字，但它的類(lèi)型其實(shí)是String。
 比如在數(shù)字輸入框時(shí)會(huì)比較有用，示例代碼如下：

 
 
{{typeof message}}

 .trim：

修飾符.trim可以自動(dòng)過(guò)濾輸入的首尾空格，示例代碼如下：

 
 
{{message}}

 從Vue.js 2.x開(kāi)始，v-model還可以用于自定義組件，滿(mǎn)足定制化的需求

感謝各位的閱讀！關(guān)于“Vuejs中如何使用指令v-model完成表單的數(shù)據(jù)雙向綁定”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！