Vue中要獲取復選框的選中狀態,需要使用v-model指令和:checked屬性。
<template> <div> <label> <input type="checkbox" v-model="checkedValue" :checked="isChecked"> Check me </label> <button @click="getCheckedValue">Get checked value</button> </div> </template> <script> export default { data() { return { checkedValue: false } }, computed: { isChecked() { return this.checkedValue } }, methods: { getCheckedValue() { console.log(this.checkedValue ? 'checked' : 'unchecked') } } } </script>
在模板中,我們使用v-model指令將復選框的選中狀態綁定到data對象中的checkedValue屬性上。同時,我們使用:checked屬性將該屬性的值綁定到computed屬性isChecked上。在computed中,我們返回了checkedValue的值,用于展示復選框的選中狀態。當復選框被點擊時,checkedValue屬性的值會同步發生變化。
在methods中,我們定義了一個getCheckedValue方法,用來獲取復選框的選中狀態。當按鈕被點擊時,會觸發該方法。我們通過判斷checkedValue的值,來打印出復選框的選中狀態。