Question

当选中单选按钮 A 时如何显示divA，而选中单选按钮 B 时如何显示divB？

<b-form-radio value="A">A</b-form-radio>
<b-form-radio value="B">B</b-form-radio>

<!-- divA -->

<div>
...
</div>

<!-- divB -->
<div>
...
</div>

Answer 1

假设您的自定义无线电控件（b-form-radio）支持v-model，则可以执行以下操作：

<b-form-radio v-model="selected" value="A">A</b-form-radio>
<b-form-radio v-model="selected" value="B">B</b-form-radio>

<!-- divA -->
<div v-show="selected === 'A'">
...
</div>

<!-- divB -->
<div v-show="selected === 'B'">
...
</div>

此外，在组件数据功能中，您需要将selected设置为反应性属性：

{
  data() {
    return {
      // Initially selected will be null
      // to hide both the div
      selected: null
    }
  }
}

总而言之，它是v-show指令与v-model的组合。另外，如果您根本不希望在页面上呈现其他div，则可以使用v-if代替v-show。

Vuejs在选中单选按钮时显示某些div

1 个答案: