---

Vue 表单Form输入-单选Radio 按钮

我们在本教程前面的 Vue 表单和 v-model 页面上看到了一些表单输入示例。

此页面是 Vue 中更多表单输入示例的集合，例如单选按钮、复选框、下拉列表和普通文本输入字段。

单选Radio 按钮

属于同一选择的单选按钮必须具有相同的名称，以便只能选择一个单选按钮。

与 Vue 中的所有输入一样，我们使用 v-model 捕获单选按钮输入值，但也必须在 <input type="radio"> 标签上明确设置值属性。

以下是我们在 Vue 表单中使用单选按钮的方法：

示例
App.vue：

<template>
<h1>Vue 中的单选按钮</h1>
<form @submit.prevent="registerAnswer">
<p>您最喜欢的动物是什么？</p>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Cat"> 猫
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Dog"> 狗
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Turtle"> 海龟
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Moose"> 驼鹿
</label>
<button type="submit">提交</button>
</form>
<div>
<h3>已提交选择：</h3>
<p id="pAnswer">{
   
   { inpValSubmitted }></p>
</div>
</template>

<script>
export default {
      
      
data() {
      
      
return {
      
      
inpVal: '',
inpValSubmitted: '尚未提交'
}
},
methods: {
      
      
registerAnswer() {
      
      
if(this.inpVal) {
      
      
this.inpValSubmitted = this.inpVal;
}
}
}
}
</script>

<style scoped>
  div {
      
      
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
      
      
    margin: 10px;
  }
  label {
      
      
    display: block;
    width: 80px;
    padding: 5px;
  }
  label:hover {
      
      
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
      
      
    background-color: lightgreen;
    padding: 5px;
  }
</style>

---

总结

本文介绍了Vue 表单Form输入-单选Radio 按钮的使用，如有问题欢迎私信和评论