Vue单选按钮的默认选中方法

Vue单选按钮是一种常用的表单组件，它可以帮助我们快速地实现用户的选择操作。那么，如何在Vue中设置单选按钮的默认选中呢？

使用v-model实现默认选中

我们需要创建一个v-model变量，用来保存单选按钮的选中状态，在渲染单选按钮时，将v-model变量绑定到单选按钮上，并设置单选按钮的值，将v-model变量的值设置为单选按钮的值，即可实现单选按钮的默认选中。

// 创建v-model变量
data () {
  return {
    gender: 'male' // 默认选中male
  }
}

// 渲染单选按钮
 Male
 Female

使用v-bind实现默认选中

我们也可以使用v-bind来实现单选按钮的默认选中，只需要在渲染单选按钮时，使用v-bind将单选按钮的checked属性绑定到一个布尔值，如果布尔值为true，则单选按钮默认选中，如果布尔值为false，则单选按钮不会默认选中。

// 渲染单选按钮
 Male
 Female

// 设置布尔值
data () {
  return {
    isMale: true, // 默认选中male
    isFemale: false
  }
}

使用v-for实现默认选中

我们还可以使用v-for来渲染单选按钮，并实现默认选中，只需要在渲染单选按钮时，使用v-for循环遍历一个数组，并将数组中的每一项绑定到单选按钮上，并设置单选按钮的值，将v-model变量的值设置为数组中某一项的值，即可实现单选按钮的默认选中。

// 创建v-model变量
data () {
  return {
    gender: 'male' // 默认选中male
  }
}

// 渲染单选按钮

   {{item.name}}


// 创建数组
data () {
  return {
    list: [
      {id: 1, name: 'Male', value: 'male'},
      {id: 2, name: 'Female', value: 'female'}
    ]
  }
}

以上就是，可以使用v-model、v-bind和v-for等方法来实现单选按钮的默认选中，希望本文能够帮助到大家。

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。