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` 方法中打印出当前选择的性别。

相关问题

帮我写一个输入框 可以输入带有百分比和值的两个单选框选择，来改变输入框里面的值 vue

好的，以下是一个简单的Vue组件代码示例，实现了你所描述的功能：

<template>
  <div>
    <input type="text" v-model="inputValue" />
    <div>
      <input type="radio" id="percentage" value="percentage" v-model="inputType" />
      <label for="percentage">百分比</label>
      <input type="radio" id="value" value="value" v-model="inputType" />
      <label for="value">值</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputType: 'percentage',
      inputValue: ''
    };
  },
  watch: {
    inputType(newVal, oldVal) {
      // 如果从百分比切换到值，将原来的百分比转换为值
      if (newVal === 'value' && oldVal === 'percentage') {
        this.inputValue = (parseFloat(this.inputValue) / 100).toFixed(2);
      }
      // 如果从值切换到百分比，将原来的值转换为百分比
      if (newVal === 'percentage' && oldVal === 'value') {
        this.inputValue = (parseFloat(this.inputValue) * 100).toFixed(0);
      }
    }
  }
};
</script>

在上面的代码中，我们使用了一个v-model指令来双向绑定输入框中的值，同时使用了两个单选框来选择输入框的类型：百分比或者值。在组件的data中，我们定义了两个变量：`inputType`和`inputValue`，分别表示输入框的类型和值。在单选框的`v-model`中，我们将其绑定到`inputType`上，这样就能够实现单选框的选择。在输入框中，我们将其`v-model`绑定到`inputValue`上，这样就能够实现输入框的双向绑定。

在组件的`watch`中，我们监听了`inputType`的变化，并根据其变化来更新`inputValue`的值。如果从百分比切换到值，我们将原来的百分比转换为值，并保留两位小数。如果从值切换到百分比，我们将原来的值转换为百分比，并取整。

这样，我们就实现了一个简单的Vue组件，可以根据用户的选择来切换输入框中的值的类型。

vant weappp 实现类似 与 field 组件一起使用 选择是否字样的左右切换单选框

Vant Weapp 提供了一个名为 `van-checkbox` 的组件，它实现了类似单选切换的功能，你可以与 `van-field` 或其他基础元素结合使用，用于展示“是”或“否”的选择。要在 Vant Weapp 中创建一个可以选择是否的左右切换单选框，你可以按照以下步骤操作：

1. 首先，在项目中引入 `van-checkbox` 组件：

   <template>
     <van-field label="选择">
       <van-checkbox v-model="checkboxValue"></van-checkbox>
     </van-field>
   </template>

2. 在 Vue 单文件组件的 `data` 对象中初始化 `checkboxValue` 属性，初始值可以设为 `true` 或 `false`，取决于默认状态：

   data() {
     return {
       checkboxValue: true, // 默认是 '是'
     };
   }

3. 当 `checkboxValue` 改变时，你可以监听其变化，并根据实际值更新相应的文案：

   watch: {
     checkboxValue(newVal) {
       this.$emit('input', newVal ? '是' : '否');
     },
   },

4. 当外部组件需要响应这个单选框的选择时，可以在模板中添加 `@change` 事件监听器：

   <van-field label="选择" @change="handleChange">
     ...
   </van-field>
   
   methods: {
     handleChange(value) {
       console.log('当前选择:', value);
     },
   }

5. 最后，你可以使用 `van-form` 来组织整个表单，如果需要多个这种类型的切换项，只需在其中添加多个 `van-checkbox` 就行。