Question

我正在VueJS中创建一个下拉列表。我希望能够根据所选选项动态显示div。

这是代码

export default {
	data(){
		return{
            selected: "Choose Option",
            options: [
                { id: 1, name: 'A' },
                { id: 2, name: 'B' },
                { id: 3, name: 'C' }
            ]
		}
  },
}

<template>
	<div id="app" class="ui grid">

        <div>    
            <select class="ui dropdown" v-model="selected">
                <option>Choose Option</option>
                <option v-for="option in options" v-bind:value="option.id">
                    {{option.name}}
                </option>
            </select>

            <div v-if="options[0].id === 1">
                HELLO
            </div>
        </div>
	</div>
</template>

每次我在选项之间切换时，或者在首次加载应用程序时，都会始终保持“ HELLO”值。

我在做什么错？我该如何更改？如果有人可以帮助我，将不胜感激。谢谢！

Answer 1

您的select输入绑定到selected变量，options不变。您是说v-if="selected === 1"吗？

Answer 2

您可以看看这个fiddle

<div v-if="selected === 2">
  two
</div>

根据selected检查div的地方。

每次我在选项之间切换时，或者在首次加载应用程序时，都会始终保持“ HELLO”值。

因为条件为真options[0].id === 1。

如何基于VueJS中的选定选项动态显示div？

2 个答案: