gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 00:39:33 26 4
gpt4 key购买 nike

我有一个使用 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 指令中单选按钮的状态?或者有更好/更简单的方法吗?

最佳答案

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

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

关于javascript - 如何根据使用 Vue.js 检查的单选按钮有条件地渲染元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57822971/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com