Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題
Vue.js可以很方便的實(shí)現(xiàn)數(shù)據(jù)雙向綁定,所以在處理表單,人機(jī)交互方面具有很大的優(yōu)勢。下面給大家介紹Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題。
摘要: 表單標(biāo)簽取值問題中,單選按鈕、復(fù)選按鈕和下拉列表都比較特殊。這里總結(jié)一下vue.js中關(guān)于單選按鈕、復(fù)選按鈕和下拉列表不同情況的取值特殊性問題。
表單標(biāo)簽取值問題中,單選按鈕、復(fù)選按鈕和下拉列表都比較特殊。這里總結(jié)一下vue.js中關(guān)于單選按鈕、復(fù)選按鈕和下拉列表不同情況的取值特殊性問題。
一、單選按鈕
單選按鈕:單選按鈕用 v-model 綁定填值屬性用來表示checked,用于判斷是否選中。
當(dāng)單選按鈕沒寫value值時(shí),在 vue.js 中將值賦為null。
在普通標(biāo)簽中,當(dāng)沒寫name時(shí),html 會(huì)默認(rèn)將沒寫name 的單選按鈕分為一組;
在vue中,即使沒寫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部分代碼:
<body> <div id="app"> <!-- 單選按鈕:單選按鈕用 v-model 綁定填值屬性用來表示checked,用于判斷是否選中。 當(dāng)單選按鈕沒寫value值時(shí),在vue中將值賦為null 在普通標(biāo)簽中,當(dāng)沒寫name時(shí),html 會(huì)默認(rèn)將沒寫name 的單選按鈕分為一組; 在vue中,即使沒寫name,只要單選按鈕v-model綁定了同一個(gè)變量(如:gender),這些按鈕也會(huì)被分為一組。
但是習(xí)慣上,我們還是也寫上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ù)選按鈕:單選按鈕用 v-model 綁定填值屬性用來表示checked,用于判斷是否選中。
當(dāng)多選按鈕沒寫value值時(shí),在 vue.js 中將值賦為null。
vue.js對于復(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段代碼:
<body> <div id="app"> <!-- v-model 綁定的是基本類型 --> <input type="checkbox" name="hobbies" id="box01" value="敲代碼" v-model="hobbies01"> <label for="box01">敲代碼</label> <input type="checkbox" name="hobbies" id="box02" value="寫代碼" v-model="hobbies02"> <label for="box02">寫代碼</label> <input type="checkbox" name="hobbies" id="box03" value="擼代碼" v-model="hobbies03"> <label for="box03">擼代碼</label> <hr/> </div> </body>
效果截圖:
初始化時(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ū)?yīng)的值寫入到數(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="寫代碼" v-model="hobbies"> <label for="box02">寫代碼</label> <input type="checkbox" name="hobbies" id="box03" value="擼代碼" v-model="hobbies"> <label for="box03">擼代碼</label> </div> </body>
效果截圖:
初始化時(shí) hobbies 是一個(gè)空數(shù)組。注意鼠標(biāo)點(diǎn)擊順序和 hobbies 值的對應(yīng)變化。
三、下拉列表
下拉列表:下拉列表中 v-model 寫在下拉列表的標(biāo)簽中 <select>標(biāo)簽中。
根據(jù)指定值選擇對應(yīng)<option> 添加選中狀態(tài)。
option 沒有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="">請選擇</option> </select> </div> </body>
結(jié)果分析:
因?yàn)樽兞?s 的初始值是空字符串,所以默認(rèn)選擇 “請選擇選項(xiàng)”(可以根據(jù)s的初識值改變默認(rèn)選項(xiàng))。當(dāng)選擇其他option時(shí),s 的值會(huì)隨之改變(字符串:"s1"/"s2"/"s3")。
3.2 未寫value值
當(dāng)未寫 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ù)選按鈕和下拉列表的取值問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識,有這方面興趣的朋友參考下吧。2018-01-01示例vue 的keep-alive緩存功能的實(shí)現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12Vue處理循環(huán)數(shù)據(jù)流程示例精講
這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程,這個(gè)又是一個(gè)編程語言,?模版語法里面必不可少的一個(gè),?也是使用業(yè)務(wù)場景使用最多的一個(gè)環(huán)節(jié)。所以學(xué)會(huì)使用循環(huán)也是重中之重了2023-04-04