Vue input 是一個非常常見的組件,提供了用戶輸入框體驗的基礎。其中,選中狀態在用戶交互時是非常重要的一個部分。Vue input 提供了很多不同的方式來實現選中,這里我們將探討一些常用的實現方法。
第一種方法是通過字面值字符串,使用 value 屬性來設置選中狀態。例如:
<input type="radio" v-model="picked" value="one">
<input type="radio" v-model="picked" value="two">
new Vue({
el: '#app',
data: {
picked: ''
}
})
這里 picked 的值就會根據用戶選擇的不同而改變。
第二種方法是將選中狀態與一個 Boolean 變量綁定。例如:
<input type="checkbox" v-model="isActive">
new Vue({
el: '#app',
data: {
isActive: false
}
})
這里 isActive 的值將隨著用戶的點擊而改變,選中或未選中。
第三種方法是使用 Radio 按鈕組件,它可以讓多個單選選項互斥選擇。例如:
<template>
<div>
<input type="radio" v-model="picked" value="one"> One
<input type="radio" v-model="picked" value="two"> Two
</div>
</template>
<script>
export default {
data() {
return {
picked: ''
}
}
}
</script>
這里 picked 的值將只可能是 'one' 或 'two',用戶無法選擇兩者之間的中間狀態。
無論是哪種方法,選中狀態的改變都會觸發對應的 v-model 變量的更新。在實現中我們可以使用 watch 對這些變量進行監控,實現選中狀態的同步。