Vue.js---表單標籤中的單選按鈕、複選按鈕和下拉列表的取值問題

時間 2019-11-18

標籤 vue.js vue 表單標籤單選按鈕複選下拉列表取值問題欄目 JavaScript 简体版

原文原文鏈接

表單標籤取值問題中，單選按鈕、複選按鈕和下拉列表都比較特殊。這裏總結一下vue.js中關於單選按鈕、複選按鈕和下拉列表不一樣狀況的取值特殊性問題。javascript

1、單選按鈕

單選按鈕：單選按鈕用 v-model 綁定填值屬性用來表示checked,用於判斷是否選中。html

當單選按鈕沒寫value值時，在 vue.js 中將值賦爲null。vue

在普通標籤中，當沒寫name時,html 會默認將沒寫name 的單選按鈕分爲一組；java

在vue中，即便沒寫name,只要單選按鈕v-model綁定了同一個變量（如：gender），這些按鈕也會被分爲一組。可是習慣上，咱們仍是也寫上name。數組

在data中定義的變量gender的值將影響到單選按鈕的默認選項，如：本例子中gender:"女"，默認選擇女。app

js部分代碼：spa

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

html部分代碼：code

<body>
  <div id="app">
    <!-- 
      單選按鈕：單選按鈕用 v-model 綁定填值屬性用來表示checked,用於判斷是否選中。
        當單選按鈕沒寫value值時，在vue中將值賦爲null
        在普通標籤中，當沒寫name時,html 會默認將沒寫name 的單選按鈕分爲一組；
        在vue中，即便沒寫name,只要單選按鈕v-model綁定了同一個變量（如：gender），這些按鈕也會被分爲一組。
可是習慣上，咱們仍是也寫上name
      
        在data中定義的變量gender的值將影響到單選按鈕的默認選項，如： 本例子中gender:"女"，默認選擇女。
      -->
    <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>

2、複選按鈕

複選按鈕：單選按鈕用 v-model 綁定填值屬性用來表示checked,用於判斷是否選中。htm

當多選按鈕沒寫value值時，在 vue.js 中將值賦爲null。ip

vue.js對於複選按鈕如何取值取決於 v-model 綁定的變量的類型。

一、基本類型

初始化時，v-model 綁定的是任意的基本類型（Number、String、Boolean、Null、Undefined），取值時會默認轉爲Boolean類型，true時表示選中，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>

效果截圖：

初始化時，hobbies01值爲空字符串轉化爲Boolean類型時false，因此未選中；hobbies02值爲字符串「....」，轉化爲Boolean類型是true，因此默認選中；hobbies03默認值是false，因此初始化時未選中。

此後，每次點擊多選按鈕，hobbies0一、hobbies0二、hobbies03的值都是 true | false 變化。

二、數組

初始化時，v-model 綁定的變量是數組類型時。vue 認爲這個複選按鈕是用於獲取值，會以選擇（鼠標點擊）的順序將對應的值寫入到數組中。

js代碼段：

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

html代碼段：

<body>
  <div id="app">
    <!-- v-model 綁定時數組 -->
    <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>

效果截圖：

初始化時 hobbies 是一個空數組。注意鼠標點擊順序和 hobbies 值的對應變化。

3、下拉列表

下拉列表：下拉列表中 v-model 寫在下拉列表的標籤中 <select>標籤中。

根據指定值選擇對應<option> 添加選中狀態。

option 沒有value屬性以 option 正反標籤中的值做爲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">小學</option>
        <option value="s2">中學</option>
        <option value="s3">大學</option>
        <option itany="itany" value="">請選擇</option>
    </select>
  </div>
</body>

結果分析：

由於變量 s 的初始值是空字符串，因此默認選擇「請選擇選項」（能夠根據s的初識值改變默認選項）。當選擇其餘option時，s 的值會隨之改變（字符串："s1"/"s2"/"s3"）。

3.2 未寫value值

當未寫 value 時， s 的值會變成「小學」/「中學」/「大學」。

3.3 多選下拉列表

multiple關鍵字，按住 ctrl 鍵進行多選。注意此時 model 綁定的變量應該是數組。

至此，完畢。感謝您的閱讀。