vue中怎么利用v-model綁定表單控件-四川平武建站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

vue中怎么利用v-model綁定表單控件

這篇文章將為大家詳細(xì)講解有關(guān)vue 中怎么利用v-model綁定表單控件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)主要從事做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)天峻,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108

1、v-model 雙向綁定文本




 
 
 



 
 Message is: {{ message }}

輸出結(jié)果：

vue 中怎么利用v-model綁定表單控件

2、v-model 雙向綁定多行文本，與上面的例子相似。




 
 
 



 <Multiline message is:
 {{ message }}

輸出結(jié)果：

vue 中怎么利用v-model綁定表單控件

3、v-model 綁定復(fù)選框




 
 
 



 
 {{ checked }}

輸出結(jié)果：選中為true 不選中則為false

vue 中怎么利用v-model綁定表單控件




 
 
 



 
 Jack
 
 John
 
 Mike
 

 Checked names: {{ checkedNames }}

輸出結(jié)果：

vue 中怎么利用v-model綁定表單控件

4、v-model 綁定單選按鈕




 
 
 



 
 One
 

 
 Two
 

 Picked: {{ picked }}

輸出結(jié)果：

vue 中怎么利用v-model綁定表單控件

5、v-model 綁定下拉列表




 
 
 



 
  
  
  
 
 Selected: {{ selected }}

輸出結(jié)果：

vue 中怎么利用v-model綁定表單控件

多選列表




 
 
 



 
  
  
  
 
 

 Selected: {{ selected }}

輸出結(jié)果：

vue 中怎么利用v-model綁定表單控件

6、動(dòng)態(tài)選項(xiàng)，用 v-for 渲染：




 
 
 



 
  
   {{ option.text }}
  
 
 Selected: {{ selected }}

輸出結(jié)果：

vue 中怎么利用v-model綁定表單控件

關(guān)于vue 中怎么利用v-model綁定表單控件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：vue中怎么利用v-model綁定表單控件
當(dāng)前網(wǎng)址：http://www.ef60e0e.cn/article/ghpgod.html

99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

新聞中心

其他資訊