如下面的代码所示,我有两个radio-buttons
,最初它们都是未选中的。第一个,当勾选时,change_()
中的日志消息打印男性。第二个在检查change_()
中的日志消息时打印女性。我想询问以下问题:
1-如何通过:unchecked
属性更改radio-button
的可检查性状态?换句话说,当radio-button
未选中时,我试图将check1
的值更改为例如male
,female
或任何其他文字值,然而,这不会触发radio-button
的可检查性状态的任何更改我希望能够通过:unchecked
属性更改radio-button
的可检查性状态。这可能吗?
2-如果后一点的答案是“不可能”,那么:unchecked
和checked
属性的目的是什么?是否只是设置单选按钮的初始检查状态?
3-由于radio-buttons
最初是未检查的,当我检查它们时,这并没有导致check1
或check2
的插值显示。我期望当radio-button
从未检查状态切换到检查状态时,因此{{}}
之间的内插文本也会改变,但这并没有发生
App.vue:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<input type="radio" :unchecked="check1" @change="(event)=>change_(event)" :value="male" />
<input type="radio" :unchecked="check2" @change="(event)=>change_(event)" :value="female" />
<div>selected radio1: {{ check1 }}</div>
<div>selected radio2: {{ check2 }}</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<script setup>
const check1 = ref('')
const check2 = ref('')
const male = ref('male')
const female = ref('female')
function change(params) {
console.log("change_:",params.target.value);
}
</script>
1条答案
按热度按时间tv6aics11#
要使用:checked和:unchecked属性更改单选按钮的可检查状态,需要对代码进行以下修改:
更新单选按钮的checked和unchecked属性,将它们分别绑定到check1和check2变量:
更新change_ function以根据所选单选按钮更新check1和check2变量: