vue element radio 点击时间控制其他元素显示隐藏

可以通过绑定点击事件来实现这个功能，具体步骤如下：

1. 在需要控制显示/隐藏的元素上添加 v-show 指令，初始值为 false，表示不显示。

<div v-show="showElement">这是需要控制的元素</div>

2. 在需要触发显示/隐藏的 radio 上绑定点击事件，通过修改 showElement 的值来控制元素的显示/隐藏。

<el-radio v-model="radio" label="1" @click="showElement = true">选项1</el-radio>
<el-radio v-model="radio" label="2" @click="showElement = false">选项2</el-radio>

3. 在 data 中定义 showElement 和 radio 变量，radio 变量用于绑定 radio 的选中状态。

data() {
  return {
    showElement: false,
    radio: ''
  }
}

这样点击 radio 选项就可以控制需要显示/隐藏的元素了。

相关问题

vue element 用单选框实现点击不同的radio产生不同的事件

在Vue中，可以使用Element UI的单选框组件来实现点击不同的单选框时触发不同的事件。

首先，我们需要在Vue组件中引入Element UI库和需要使用的单选框组件。可以使用npm或者cdn引入Element UI。

然后，在组件的template中使用单选框组件，并通过v-model绑定一个data中的变量来控制选中状态。例如：

<el-radio-group v-model="selectedOption">
  <el-radio :label="1">选项一</el-radio>
  <el-radio :label="2">选项二</el-radio>
  <el-radio :label="3">选项三</el-radio>
  <el-radio :label="4">选项四</el-radio>
</el-radio-group>

在data中定义一个变量selectedOption来保存选中的选项的值。

data() {
  return {
    selectedOption: ''
  }
}

接下来，可以使用watch属性来监控selectedOption的变化，并执行相应的事件。

watch: {
  selectedOption(val) {
    switch (val) {
      case '1':
        // 执行选项一的事件
        break;
      case '2':
        // 执行选项二的事件
        break;
      case '3':
        // 执行选项三的事件
        break;
      case '4':
        // 执行选项四的事件
        break;
      default:
        break;
    }
  }
}

根据选中的选项值，可以在watch中编写不同的事件逻辑来处理不同的操作。

通过以上步骤，我们就可以实现在点击不同的单选框时触发不同的事件效果。

vue element el-radio-button 自定义样式

要自定义 `el-radio-button` 的样式，你可以使用以下 CSS 代码：

/* radio button 的圆圈 */
.el-radio-button__orig-radio {
  border-color: #333;
}

/* radio button 选中状态的颜色 */
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  background-color: #333;
  border-color: #333;
}

/* radio button 文字的颜色 */
.el-radio-button__inner {
  color: #333;
}

你可以将这些 CSS 代码添加到你的样式表中，或者使用 `style` 标签将其添加到你的页面中。如果你想更改特定的 `el-radio-button`，则可以使用 `class` 或 `id` 选择器来选择它。