vue监听radio属性
时间: 2023-07-03 19:09:37 浏览: 44
在Vue中,可以使用v-model指令来监听单选框(radio)的选中状态。当选中的单选框的value值与v-model绑定的属性值(即选中的值)相同时,v-model绑定的属性值就会更新为该单选框的value值。
例如:
```
<template>
<div>
<label>
<input type="radio" value="male" v-model="gender">
Male
</label>
<label>
<input type="radio" value="female" v-model="gender">
Female
</label>
<p>You selected: {{ gender }}</p>
</div>
</template>
<script>
export default {
data() {
return {
gender: ''
}
}
}
</script>
```
在上面的示例中,我们使用了v-model指令来绑定gender属性,当我们选中某个单选框时,gender属性的值会更新为该单选框的value值。
相关问题
vue中监听单选框切换
在 Vue 中,可以使用 `v-model` 指令来绑定单选框的值,然后使用 `@change` 事件监听单选框的切换。
以下是一个示例:
```
<template>
<div>
<label>
<input type="radio" value="male" v-model="gender" @change="handleChange"> Male
</label>
<label>
<input type="radio" value="female" v-model="gender" @change="handleChange"> Female
</label>
<p>You selected: {{ gender }}</p>
</div>
</template>
<script>
export default {
data() {
return {
gender: 'male'
}
},
methods: {
handleChange() {
console.log('Selected gender:', this.gender)
}
}
}
</script>
```
在上面的代码中,我们使用 `v-model` 指令将单选框的值绑定到 `gender` 变量上。然后,我们使用 `@change` 事件监听单选框的切换,并在 `handleChange` 方法中打印出当前选择的性别。
VUE3 watch监听单选按钮
在 Vue3 中,我们可以使用 `watch` 监听单选按钮的变化,具体实现如下:
```javascript
<template>
<div>
<label>
<input type="radio" value="A" v-model="selected">
A
</label>
<label>
<input type="radio" value="B" v-model="selected">
B
</label>
</div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
setup() {
const selected = ref('A')
watch(selected, (newValue, oldValue) => {
console.log('selected changed from', oldValue, 'to', newValue)
})
return {
selected,
}
},
}
</script>
```
在上面的代码中,我们使用了 `ref` 来创建响应式数据 `selected`,然后使用 `watch` 监听 `selected` 的变化。当 `selected` 的值发生变化时,回调函数会被执行,我们可以在回调函数中做一些相应的操作。
注意:使用 `watch` 函数需要在 `setup` 函数中调用。