vue3复选框

在 Vue 3 中，复选框（Checkbox）的实现可以通过 `v-model` 指令实现双向数据绑定，也可以通过手动绑定 `checked` 属性和触发 `change` 事件来实现更精细的控制。以下是一个典型的实现方式，使用 `<script setup>` 语法实现基础复选框功能。 ### 基础复选框实现示例 ```vue <script setup> import { ref } from 'vue'; const isAgree = ref(false); </script> <template> <div class="p-8 bg-indigo-50 text-center"> <input type="checkbox" v-model="isAgree" /> <label>同意协议</label> <div class="mt-4"> <p>当前状态: {{ isAgree ? '已同意' : '未同意' }}</p> </div> </div> </template> ``` 上述代码中，`v-model` 绑定的 `isAgree` 是一个 `ref` 类型的响应式变量，用于跟踪复选框的状态。当选中复选框时，`isAgree` 的值会自动更新为 `true`，反之则为 `false`。 ### 手动控制复选框状态 如果希望更灵活地控制复选框的状态，可以手动绑定 `checked` 属性并监听 `change` 事件，示例如下： ```vue <script setup> import { ref } from 'vue'; const isAgree = ref(false); const handleCheck = (event) => { isAgree.value = event.target.checked; }; </script> <template> <div class="p-8 bg-indigo-50 text-center"> <input type="checkbox" :checked="isAgree" @change="handleCheck" /> <label>同意协议</label> <div class="mt-4"> <p>当前状态: {{ isAgree ? '已同意' : '未同意' }}</p> </div> </div> </template> ``` 通过 `:checked` 和 `@change` 实现了与 `v-model` 相同的功能，但提供了更灵活的事件处理逻辑。 ### 使用组件库（如 Vant）实现复选框 如果使用了组件库（如 Vant），可以通过其封装好的组件实现复选框功能，并且通常会提供更丰富的样式和交互支持。以下是一个使用 Vant 的示例[^2]： ```vue <script setup> import { ref } from 'vue'; const isAgree = ref(false); </script> <template> <van-checkbox v-model:checked="isAgree">同意协议</van-checkbox> <p>当前状态: {{ isAgree ? '已同意' : '未同意' }}</p> </template> ``` Vant 的 `van-checkbox` 组件通过 `v-model:checked` 实现双向绑定，同时提供了更美观的界面和交互体验。 ### 复选框美化方法 如果需要自定义复选框的外观，可以通过 CSS 隐藏原生复选框，并使用伪元素实现自定义样式[^3]。以下是基本的美化代码示例： ```vue <script setup> import { ref } from 'vue'; const isAgree = ref(false); </script> <template> <div class="custom-checkbox"> <input type="checkbox" v-model="isAgree" id="agreeCheckbox" /> <label for="agreeCheckbox" class="checkbox-label">同意协议</label> </div> </template> <style scoped> .custom-checkbox input[type="checkbox"] { display: none; } .checkbox-label::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 8px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; vertical-align: middle; } .custom-checkbox input[type="checkbox"]:checked + .checkbox-label::before { background-color: #42b883; content: '✔'; font-size: 12px; color: #fff; text-align: center; } </style> ``` 上述代码通过 CSS 隐藏了原生的 `<input type="checkbox">`，并使用 `::before` 伪元素绘制了自定义的复选框样式，同时在选中时显示对勾符号。 ---