javascript - 如何根据使用 Vue.js 检查的单选按钮有条件地渲染元素

Question

我有一个使用 bootstrap-vue 构建的表单，单选按钮代码如下所示:

    <b-form-group label="Claim Type">
         <b-form-radio-group
              id="claimType"
              required
              v-model="form.claimType"
              :options="claimTypeOptions"
              name="claimType"
              stacked>
         </b-form-radio-group>
    </b-form-group>

我的脚本看起来像这样:

     data() {
      return {
      form: {
       claimType: ""
      },
       claimTypeOptions: [
         { text: "Option 1", value: "Option 1" },
         { text: "Option 2", value: "Option 2" }
       ]
  }

当我选择选项 1 时，我想使用 v-if 渲染一个 block ，或者在选择另一个单选按钮时隐藏该 block 。但如何正确引用 v-if 指令中单选按钮的状态？或者有更好/更简单的方法吗？

Answer 1

只需使用您的 v-model 作为检查语句即可。 例如。

<div v-if="form.claimType === 'Option 1'">
    <span>Show me </span>
</div>