Vue.js可以很方便的實(shí)現(xiàn)數(shù)據(jù)雙向綁定，所以在處理表單，人機(jī)交互方面具有很大的優(yōu)勢(shì)。下面給大家介紹Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題。

創(chuàng)新互聯(lián)專注于青海企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。青海網(wǎng)站建設(shè)公司,為青海等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

摘要: 表單標(biāo)簽取值問(wèn)題中，單選按鈕、復(fù)選按鈕和下拉列表都比較特殊。這里總結(jié)一下vue.js中關(guān)于單選按鈕、復(fù)選按鈕和下拉列表不同情況的取值特殊性問(wèn)題。

    表單標(biāo)簽取值問(wèn)題中，單選按鈕、復(fù)選按鈕和下拉列表都比較特殊。這里總結(jié)一下vue.js中關(guān)于單選按鈕、復(fù)選按鈕和下拉列表不同情況的取值特殊性問(wèn)題。

一、單選按鈕

    單選按鈕：?jiǎn)芜x按鈕用 v-model 綁定填值屬性用來(lái)表示checked,用于判斷是否選中。

    當(dāng)單選按鈕沒(méi)寫value值時(shí)，在 vue.js 中將值賦為null。

    在普通標(biāo)簽中，當(dāng)沒(méi)寫name時(shí),html 會(huì)默認(rèn)將沒(méi)寫name 的單選按鈕分為一組；

    在vue中，即使沒(méi)寫name,只要單選按鈕v-model綁定了同一個(gè)變量（如：gender），這些按鈕也會(huì)被分為一組。但是習(xí)慣上，我們還是也寫上name。

    在data中定義的變量gender的值將影響到單選按鈕的默認(rèn)選項(xiàng)，如： 本例子中g(shù)ender:"女"，默認(rèn)選擇女。

    js部分代碼：

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  gender:"女"
 }
 });
}

    html部分代碼：

 

 
 
 男
 
 女
 

二、復(fù)選按鈕

    復(fù)選按鈕：?jiǎn)芜x按鈕用 v-model 綁定填值屬性用來(lái)表示checked,用于判斷是否選中。

    當(dāng)多選按鈕沒(méi)寫value值時(shí)，在 vue.js 中將值賦為null。

    vue.js對(duì)于復(fù)選按鈕如何取值取決于 v-model 綁定的變量的類型。

1、基本類型

    初始化時(shí)，v-model 綁定的是任意的基本類型（Number、String、Boolean、Null、Undefined），取值時(shí)會(huì)默認(rèn)轉(zhuǎn)為Boolean類型，true時(shí)表示選中，false表示未選中。

js段代碼：

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  hobbies01:"",
  hobbies02:"...",
  hobbies03:false
 }
 });
}

html段代碼：

 

 
 
 敲代碼
 
 寫代碼
 
 擼代碼
 

 

效果截圖：

    初始化時(shí)，hobbies01值為空字符串轉(zhuǎn)化為Boolean類型時(shí)false，所以未選中；hobbies02值為字符串“....”，轉(zhuǎn)化為Boolean類型是true，所以默認(rèn)選中；hobbies03默認(rèn)值是false，所以初始化時(shí)未選中。

    此后，每次點(diǎn)擊多選按鈕，hobbies01、hobbies02、hobbies03的值都是 true | false 變化。

2、數(shù)組

    初始化時(shí)，v-model 綁定的變量是數(shù)組類型時(shí)。vue 認(rèn)為這個(gè)復(fù)選按鈕是用于獲取值，會(huì)以選擇（鼠標(biāo)點(diǎn)擊）的順序?qū)?duì)應(yīng)的值寫入到數(shù)組中。

js代碼段：

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  hobbies:[]
 }
 });
}

html代碼段：

 

 
 
 敲代碼
 
 寫代碼
 
 擼代碼
 

效果截圖：

    初始化時(shí) hobbies 是一個(gè)空數(shù)組。注意鼠標(biāo)點(diǎn)擊順序和 hobbies 值的對(duì)應(yīng)變化。                 

三、下拉列表

    下拉列表：下拉列表中 v-model 寫在下拉列表的標(biāo)簽中 標(biāo)簽中。

    根據(jù)指定值選擇對(duì)應(yīng)

添加選中狀態(tài)。

    option 沒(méi)有value屬性 以 option 正反標(biāo)簽中的值 作為value。

3.1 下拉列表

js代碼段：

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  s:""
 }
 });
}

html代碼段：

小學(xué) 中學(xué) 大學(xué) 請(qǐng)選擇