前端筆記Vue項目day2(一）

表單基本操作
獲取單選框中的值
通過v-model
[mw_shl_code=applescript,true]<!--
1、 兩個單選框需要同時通過v-model 雙向綁定 一個值
2、 每一個單選框必須要有value屬性 且value 值不能一樣
3、 當某一個單選框選中的時候 v-model 會將當前的 value值 改變 data 中的 數據

            gender 的值就是選中的值，我們只需要實時監控他的值就可以了
    -->

<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>

<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>

<script>
new Vue({
data: {
// 默認會讓當前的 value 值爲 2 的單選框選中
gender: 2,
},
})

</script>[/mw_shl_code]
獲取複選框中的值
通過v-model
和獲取單選框中的值一樣
複選框 checkbox 這種的組合時 data 中的 hobby 我們要定義成數組 否則無法實現多選
[mw_shl_code=applescript,true]<!--
1、 複選框需要同時通過v-model 雙向綁定 一個值
2、 每一個複選框必須要有value屬性 且value 值不能一樣
3、 當某一個單選框選中的時候 v-model 會將當前的 value值 改變 data 中的 數據

            hobby 的值就是選中的值，我們只需要實時監控他的值就可以了
    -->

<div>
<span>愛好：</span>
<input type="checkbox" id="ball" value="1" v-model='hobby'>
<label for="ball">籃球</label>
<input type="checkbox" id="sing" value="2" v-model='hobby'>
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model='hobby'>
<label for="code">寫代碼</label>
</div>
<script>
new Vue({
data: {
// 默認會讓當前的 value 值爲 2 和 3 的複選框選中
hobby: ['2', '3'],
},
})
</script>[/mw_shl_code]
獲取下拉框和文本框中的值
通過v-model
[mw_shl_code=applescript,true]<div>
<span>職業：</span>
<!--
1、 需要給select 通過v-model 雙向綁定 一個值
2、 每一個option 必須要有value屬性 且value 值不能一樣
3、 當某一個option選中的時候 v-model 會將當前的 value值 改變 data 中的 數據
occupation 的值就是選中的值，我們只需要實時監控他的值就可以了
-->
<!-- multiple 多選 -->
<select v-model='occupation' multiple>
<option value="0">請選擇職業...</option>
<option value="1">教師</option>
<option value="2">軟件工程師</option>
<option value="3">律師</option>
</select>
<!-- textarea 是 一個雙標籤 不需要綁定value 屬性的 -->
<textarea v-model='desc'></textarea>
</div>
<script>
new Vue({
data: {
// 默認會讓當前的 value 值爲 2 和 3 的下拉框選中
occupation: ['2', '3'],
desc: 'nihao'
},
})
</script>[/mw_shl_code]