代码之家 › 专栏 › 技术社区 › Amrmsmb

如何通过:checked或:unchecked属性更改单选按钮的可检查性状态

vue-composition-api vue-component vuejs3 vue.js

0

Amrmsmb · 技术社区 · 3 年前

如下面发布的代码所示,我有两个 radio-buttons ,最初这两个选项都未选中。选中第一个时,中的日志消息 change_() 打印男性。在中检查日志消息时的第二个 更改() 打印女性。我想查询以下内容:

1-如何更改的可检查性状态 radio-button 通过 :unchecked 所有物换句话说,当 单选按钮 未选中,我尝试更改的值 check1 例如 male , female 或者其他任何文字值,然而没有触发的可检查性状态的任何更改 单选按钮 我希望能够更改的可检查性状态 单选按钮 通过 :未选中 所有物这可能吗?

2-如果后一点的答案是“不可能”,那么的目的是什么 :未选中 和 checked 请问是房产吗?它只是为单选按钮设置一个初始检查状态吗?

3-作为 单选按钮 最初未检查,当我检查它们时,这并没有导致的插值 检查1 或 check2 显示。我预计什么时候 单选按钮 从未检查状态切换到检查状态,因此插值文本介于 {{}} 也要改变,但这不会发生

应用.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 回复 | 直到 3 年前

1

0

413 D3Z 3 年前

要使用:checked和:unchecked属性更改单选按钮的检查能力状态,需要对代码进行以下修改:

更新单选按钮' checked和unchecked属性,将它们分别绑定到check1和check2变量:

更新change_函数,根据所选单选按钮更新check1和check2变量:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <input type="radio" :checked="check1" @change="(event) => change_(event, 1)" :value="male" />
  <input type="radio" :checked="check2" @change="(event) => change_(event, 2)" :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_(event, option) {
  if (option === 1) {
    check1.value = event.target.value;
  } else if (option === 2) {
    check2.value = event.target.value;
  }
}
</script>