在 Vue 中显示/隐藏带有选择选项的 div答案

【问题标题】：Show / Hide a div with select options in Vue在 Vue 中显示/隐藏带有选择选项的 div
【发布时间】：2022-07-16 10:52:37
【问题描述】：

我想知道是否有办法用v-if 或v-show 显示或隐藏<divs>。

我有两个选择：

<select class="form-select" v-model="chooseOption">
            <option value="Option1">Show Option1</option>
            <option value="Option2">Show Option2</option>
</select>

我还有两个<divs>，我希望在选择相应选项时显示它们：

<div v-if="chooseOption === 'Option1'">
    <a>This is Option1</a>
</div>

<div v-if="chooseOption === 'Option2'">
    <a>This is Option2</a>
</div>

但这似乎不起作用。有没有人建议我如何解决这个问题？

【问题讨论】：

代码的其余部分看起来如何？适合我
好吧..我忘记了数据中的逗号，谢谢提示。

标签： vue.js select

【解决方案1】：

检查我制作的这个代码框：https://codesandbox.io/s/kind-phoebe-yvljkl?file=/src/components/Example.vue

你是否正确定义了组件的数据函数？

<script>
export default {
  data() {
    return {
      chooseOption: null,
    };
  },
};
</script>

【讨论】：