Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題

發(fā)布時(shí)間：2020-08-30 03:57:04 來(lái)源：腳本之家閱讀：350 作者：mrr 欄目：web開(kāi)發(fā)

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

摘要: 表單標(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)寫(xiě)value值時(shí)，在 vue.js 中將值賦為null。

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

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

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

js部分代碼：

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

html部分代碼：

<body>
 <div id="app">
 <!-- 
  單選按鈕：?jiǎn)芜x按鈕用 v-model 綁定填值屬性用來(lái)表示checked,用于判斷是否選中。
  當(dāng)單選按鈕沒(méi)寫(xiě)value值時(shí)，在vue中將值賦為null
  在普通標(biāo)簽中，當(dāng)沒(méi)寫(xiě)name時(shí),html 會(huì)默認(rèn)將沒(méi)寫(xiě)name 的單選按鈕分為一組；
  在vue中，即使沒(méi)寫(xiě)name,只要單選按鈕v-model綁定了同一個(gè)變量（如：gender），這些按鈕也會(huì)被分為一組。

但是習(xí)慣上，我們還是也寫(xiě)上name

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

 -->
 <input type="radio" id="man" name="gender" value="男" v-model="gender">
 <label for="man">男</label>
 <input type="radio" id="woman" name="gender" value="女" v-model="gender">
 <label for="woman">女</label>
 </div>
</body>

二、復(fù)選按鈕

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

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

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

1、基本類(lèi)型

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

js段代碼：

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

html段代碼：

<body>
 <div id="app">
 <!-- v-model 綁定的是基本類(lèi)型 -->
 <input type="checkbox" name="hobbies" id="box01" value="敲代碼" v-model="hobbies01">
 <label for="box01">敲代碼</label>
 <input type="checkbox" name="hobbies" id="box02" value="寫(xiě)代碼" v-model="hobbies02">
 <label for="box02">寫(xiě)代碼</label>
 <input type="checkbox" name="hobbies" id="box03" value="擼代碼" v-model="hobbies03">
 <label for="box03">擼代碼</label>
 <hr/>
 </div>
</body>

效果截圖：

Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題

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

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

2、數(shù)組

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

js代碼段：

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

html代碼段：

<body>
 <div id="app">
 <!-- v-model 綁定時(shí)數(shù)組 -->
 <input type="checkbox" name="hobbies" id="box01" value="敲代碼" v-model="hobbies">
 <label for="box01">敲代碼</label>
 <input type="checkbox" name="hobbies" id="box02" value="寫(xiě)代碼" v-model="hobbies">
 <label for="box02">寫(xiě)代碼</label>
 <input type="checkbox" name="hobbies" id="box03" value="擼代碼" v-model="hobbies">
 <label for="box03">擼代碼</label>
 </div>
</body>

效果截圖：

Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題

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

三、下拉列表

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

根據(jù)指定值選擇對(duì)應(yīng)<option> 添加選中狀態(tài)。

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

3.1 下拉列表

js代碼段：

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

html代碼段：

<body>
 <div id="app">
 <select v-model="s">
  <option value="s1">小學(xué)</option>
  <option value="s2">中學(xué)</option>
  <option value="s3">大學(xué)</option>
  <option itany="itany" value="">請(qǐng)選擇</option>
 </select>
 </div>
</body>

結(jié)果分析：

因?yàn)樽兞?s 的初始值是空字符串，所以默認(rèn)選擇 “請(qǐng)選擇選項(xiàng)”（可以根據(jù)s的初識(shí)值改變默認(rèn)選項(xiàng)）。當(dāng)選擇其他option時(shí)，s 的值會(huì)隨之改變（字符串："s1"/"s2"/"s3"）。

3.2 未寫(xiě)value值

當(dāng)未寫(xiě) value 時(shí)， s 的值會(huì)變成 “小學(xué)”/“中學(xué)”/“大學(xué)”。

3.3 多選下拉列表

multiple關(guān)鍵字，按住 ctrl 鍵進(jìn)行多選。注意此時(shí) model 綁定的變量應(yīng)該是數(shù)組。

總結(jié)

以上所述是小編給大家介紹的Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題