延續昨日的雙向綁定
我們也可以搭配 v-for
來渲染選單的 options
<template>
<div class="box">
<select v-model="selected" multiple>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<p>selected: {{ selected }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref('[]')
const options = ref([
{ text: '香蕉', value: 'banana' },
{ text: '蘋果', value: 'apple' },
{ text: '葡萄', value: 'grape' }
])
</script>
select
預設單選,我們加上 multiple
關鍵字就可以變為多選
v-model
通常用來綁定靜態文字或布林值(複選框),但我們可以透過搭配使用 v-bind
來使其綁定動態或是非文字類型的資料
以下是綁定物件的例子
<template>
<div class="box">
<input type="checkbox" v-model="checked" :value="1"> 數字 1
<input type="checkbox" v-model="checked" :value="{id:2}"> 物件
<p>{{ checked }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const checked = ref([])
</script>
toggle
預設布林值,也就是 true
或 false
<input type="checkbox" v-model="toggle">
true-value
與 false-value
是 Vue 給的特定 attribute
,只能搭配 v-model
使用,這邊透過這兩個特定屬性把換成綁定字串
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
/>
同樣可以透過 v-bind
動態綁定,數值、物件、陣列都可以
<input
type="checkbox"
v-model="toggle"
:true-value="dynamicTrueValue"
:false-value="dynamicFalseValue"
/>
當然如果嫌麻煩,想在 v-model
直接綁定非字串類型的資料也是可以的
<template>
<div class="box">
<select v-model="selected">
<option :value="{ name: 'Dog',age:10 }">dog</option>
<option :value="{ name: 'Cat',age:5 }">cat</option>
</select>
<p>{{ selected }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref({})
</script>
這邊直接綁定物件
v-model
的修飾子.lazy
.number
.trim
一般情況下 v-model
在輸入時就同步會更新變數, .lazy
會改成只在 change 事件(輸入框失焦或按 Enter)才更新,適合用在只在輸入完畢後再更新的狀況
<input v-model.lazy="msg" />
通常 input
就算輸入數字也是屬於數字字串,這時 .number
可以幫我們把輸入值使用 parseFloat()
轉換為浮點數型態,當使用 input[type="number"]
時,.number
會自動啟用
<input v-model.number="age" />
最後是 .trim
可以移除 user 輸入的前後空白,適合用在避免 user 輸入多餘空格,例如帳號、密碼
<input v-model.trim="msg" />
ref:
https://zh-hk.vuejs.org/guide/essentials/forms.html