使用 Element UI 写出四个按钮点击选取,只能单选

以下是使用 Element UI 实现的四个单选按钮：

<template>
  <div>
    <el-radio v-model="selected" label="option1">Option 1</el-radio>
    <el-radio v-model="selected" label="option2">Option 2</el-radio>
    <el-radio v-model="selected" label="option3">Option 3</el-radio>
    <el-radio v-model="selected" label="option4">Option 4</el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    }
  }
}
</script>

在上面的代码中，我们使用 `el-radio` 组件来创建四个单选按钮，并使用 `v-model` 指令将选择的值绑定到 `selected` 变量上。`label` 属性用于指定每个单选按钮的值。当用户点击其中一个单选按钮时，`selected` 变量的值会被更新为该单选按钮的值。由于 `v-model` 指令的作用，选中的单选按钮会被高亮显示。

相关问题

使用 Element UI 中的el-button 写出四个按钮点击选取,只能单选

可以使用 Element UI 中的 el-radio-group 和 el-radio 来实现单选功能，结合 el-button 可以实现四个按钮点击选取，只能单选的效果。下面是一个示例代码：

<template>
  <div>
    <el-radio-group v-model="selected">
      <el-radio label="option1">Option 1</el-radio>
      <el-radio label="option2">Option 2</el-radio>
      <el-radio label="option3">Option 3</el-radio>
      <el-radio label="option4">Option 4</el-radio>
    </el-radio-group>
    <el-button @click="selected = 'option1'">Button 1</el-button>
    <el-button @click="selected = 'option2'">Button 2</el-button>
    <el-button @click="selected = 'option3'">Button 3</el-button>
    <el-button @click="selected = 'option4'">Button 4</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    }
  }
}
</script>

在这个示例中，el-radio-group 和 el-radio 用来实现单选功能，v-model 绑定了选项的值，可以根据选中的选项来决定显示哪个按钮是被选中的，同时也可以通过按钮的点击事件来改变选中的选项。

element单选框回显

### Element UI 单选框组件回显实现方法

为了实现在页面加载时自动显示已保存的选择状态，可以利用 `v-model` 绑定数据模型来控制单选框的状态。下面是一个具体的例子说明如何配置和使用带有默认选项的单选按钮组。

#### 数据准备
假设服务器返回的数据结构如下：

{
    "id": 1,
    "name": "张三",
    "gender": "male"
}

其中 `"gender"` 字段用于指示用户的性别偏好，默认情况下应展示该字段对应的值作为初始选择项。

#### Vue实例定义
创建Vue实例并将接收到的信息存储到data属性中:

new Vue({
  el: '#app',
  data() {
    return {
      userGender: '' // 用户性别变量初始化为空字符串
    }
  },
  created(){
     axios.get('/api/userInfo')
          .then(response => this.userGender=response.data.gender);
  }
});

此部分代码会在组件创建完成后发起请求获取用户信息，并把得到的结果中的 gender 值赋给 `userGender` 属性[^1]。

#### 页面模板编写
HTML 部分通过绑定 `v-model` 到刚才声明过的 `userGender` 来同步视图层与逻辑层之间的交互行为:

<template>
<div id="app">
  <!-- 使用element ui 的radio group -->
  <el-radio-group v-model="userGender">
    <el-radio label="female">女</el-radio>
    <el-radio label="male">男</el-radio>
  </el-radio-group>

  {{ userGender }} <!-- 显示当前选中的值 -->
</div>
</template>

上述代码片段展示了如何结合Element UI框架下的 `<el-radio>` 和 `<el-radio-group>` 标签构建一组互斥的单选按钮；同时借助双大括号语法动态呈现所选取的内容[^2]。

一旦完成了以上步骤，在浏览器端渲染出来的界面将会依据实际取得的服务端响应而呈现出相应的预设选项被高亮标记出来，即实现了所谓的“回显”。