vue3中实现<van-radio v-model="checkRead">选项1</van-radio>的状态切换
时间: 2024-02-20 15:57:33 浏览: 127
vue 表单之通过v-model绑定单选按钮radio
5星 · 资源好评率100%
在Vue3中,实现上述功能可以采用以下步骤:
1. 在组件中定义 `checkRead` 变量,并将其作为 `v-model` 的绑定值:
```javascript
<template>
<van-radio v-model="checkRead">选项1</van-radio>
</template>
<script>
export default {
data() {
return {
checkRead: false
}
}
}
</script>
```
2. 在 `setup` 函数中导入 `ref` 函数,将 `checkRead` 变量转换为响应式对象:
```javascript
<script>
import { ref } from 'vue'
export default {
setup() {
const checkRead = ref(false)
return {
checkRead
}
}
}
</script>
```
3. 通过 `v-model` 绑定的 `checkRead` 变量可以实现状态的切换,当选中 `van-radio` 组件时,`checkRead` 的值为 `true`,反之为 `false`。
```javascript
<template>
<van-radio v-model="checkRead">选项1</van-radio>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checkRead = ref(false)
return {
checkRead
}
}
}
</script>
```
阅读全文