javascript - 如何在选择下拉菜单中隐藏和显示 vue js 表单向导选项卡？

Question

我已经使用 vue js 制作了一个表单向导，在第五步中，但我想在选择下拉菜单到中间步骤时使用索引隐藏和显示第三步和第四步。

查看此插件:https://cristijora.github.io/vue-form-wizard/#/?id=methods

选择隐藏时:

然后选择显示:

Wizard.vue

<template>
  <div>
    <div class="dropdown">
      <select name="" id="">
        <option value="hide">hide</option>
        <option value="show">show</option>
      </select>
    </div>
    <form-wizard @on-complete="onComplete">
      <tab-content title="first"
                    icon="ti-user">
        first
      </tab-content>
      <tab-content title="second"  icon="ti-settings">
        second
      </tab-content>
      <tab-content title="four" icon="ti-settings">
        four
      </tab-content>
      <tab-content title="five"
                    icon="ti-settings">
        five
      </tab-content>
      <tab-content title="Last step"
                    icon="ti-check">
        Yuhuuu! This seems pretty damn simple
      </tab-content>
    </form-wizard>
  </div>
</template>

Answer 1

首先在Wrapper组件的data中添加选项值myVal。

您可以使用条件渲染。 docs

v-if="myVal === 'hide'"

指令隐藏和显示元素。

我们可以添加样式

.tab-container {
   display:flex,
   justify-content: space-between
}