欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2017年11月22日 11:52:08   投稿:mrr  
這篇文章主要介紹了Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下

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)寫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部分代碼:

<body>
 <div id="app">
 <!-- 
  單選按鈕:?jiǎn)芜x按鈕用 v-model 綁定填值屬性用來(lái)表示checked,用于判斷是否選中。
  當(dāng)單選按鈕沒(méi)寫value值時(shí),在vue中將值賦為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)選擇女。

 -->
 <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)寫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段代碼:

<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ū)?duì)應(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 值的對(duì)應(yīng)變化。                 

三、下拉列表

    下拉列表:下拉列表中 v-model 寫在下拉列表的標(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 未寫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ù)選按鈕和下拉列表的取值問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • vue prop傳值類型檢驗(yàn)方式

    vue prop傳值類型檢驗(yàn)方式

    這篇文章主要介紹了vue prop傳值類型檢驗(yàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • vue3中如何使用ts

    vue3中如何使用ts

    這篇文章主要介紹了vue3中如何使用ts,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 拿來(lái)就用vue-gird-layout組件封裝示例

    拿來(lái)就用vue-gird-layout組件封裝示例

    這篇文章主要介紹了vue-gird-layout組件封裝示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • 詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot

    詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot

    本篇文章給大家通過(guò)代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識(shí),有這方面興趣的朋友參考下吧。
    2018-01-01
  • vue中配置scss全局變量的步驟

    vue中配置scss全局變量的步驟

    這篇文章主要介紹了vue中配置scss全局變量的步驟,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2020-12-12
  • vue-router安裝和使用詳解

    vue-router安裝和使用詳解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,分步驟介紹了安裝和使用vue-router的方法,感興趣的朋友跟隨小編一起看看吧
    2023-08-08
  • 示例vue 的keep-alive緩存功能的實(shí)現(xiàn)

    示例vue 的keep-alive緩存功能的實(shí)現(xiàn)

    這篇文章主要介紹了示例vue 的keep-alive緩存功能的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-12
  • Vue.js與Flask/Django后端配合方式

    Vue.js與Flask/Django后端配合方式

    在現(xiàn)代Web開(kāi)發(fā)中,Vue.js與Flask或Django配合使用,實(shí)現(xiàn)前后端分離,提高開(kāi)發(fā)效率和應(yīng)用性能,本文介紹了整合Vue.js和Flask/Django的步驟,包括環(huán)境搭建、API編寫、項(xiàng)目配置,以及生產(chǎn)部署,此架構(gòu)不僅加快了開(kāi)發(fā)進(jìn)程,還提高了項(xiàng)目的可維護(hù)性和可擴(kuò)展性
    2024-09-09
  • Vue處理循環(huán)數(shù)據(jù)流程示例精講

    Vue處理循環(huán)數(shù)據(jù)流程示例精講

    這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程,這個(gè)又是一個(gè)編程語(yǔ)言,?模版語(yǔ)法里面必不可少的一個(gè),?也是使用業(yè)務(wù)場(chǎng)景使用最多的一個(gè)環(huán)節(jié)。所以學(xué)會(huì)使用循環(huán)也是重中之重了
    2023-04-04
  • 安裝VUE-CLI一直失敗的排錯(cuò)過(guò)程及解決方案

    安裝VUE-CLI一直失敗的排錯(cuò)過(guò)程及解決方案

    這篇文章主要介紹了安裝VUE-CLI一直失敗的排錯(cuò)過(guò)程及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評(píng)論