在Vue中,radio是一種常見的表單元素之一。當我們在使用radio的時候,通常需要知道radio是否被選中了。Vue提供了非常方便的方式讓我們獲取radio的選中狀態。
<div id="app"> <input type="radio" v-model="selected" value="A"> Option A <input type="radio" v-model="selected" value="B"> Option B <p>Selected: {{ selected }}</p> </div> <script> var app = new Vue({ el: '#app', data: { selected: 'A' } }) </script>
在上面的例子中,我們通過v-model指令來綁定radio的選中狀態到selected變量上。當我們在選中radio的同時,selected變量的值也會隨之改變。
但是,有些時候我們只想知道radio是否被選中了,而不關心選中了哪一個選項。這時我們可以使用:checked屬性來判斷radio是否被選中了。在Vue中,可以使用v-bind指令來綁定:checked屬性。
<div id="app"> <input type="radio" v-model="selected" value="A"> Option A <input type="radio" v-model="selected" value="B"> Option B <p>Selected: {{ selected }}</p> <p>Is Option A selected? {{ isOptionASelected }}</p> </div> <script> var app = new Vue({ el: '#app', data: { selected: 'A' }, computed: { isOptionASelected: function() { return this.$refs.optionA.checked; } } }) </script>
在上面的例子中,我們定義了一個計算屬性isOptionASelected來判斷Option A是否被選中了。我們通過$refs屬性來獲取到Option A這個元素的DOM對象,然后獲取到它的:checked屬性來判斷是否被選中了。
如果我們有多個radio,并且只關心其中一個radio的選中狀態,那么可以使用ref屬性來獲取到這個radio的DOM對象。在上面的例子中,我們給Option A這個radio添加了ref屬性,然后通過$refs.optionA來獲取到它的DOM對象。
在Vue中,radio的選中狀態通常都是通過v-model指令來綁定的。在我們需要判斷radio的選中狀態時,可以通過:checked屬性和$refs屬性來獲取到它的選中狀態。
上一篇vue 根據長度遍歷
下一篇vue qs模塊引入