Vue.js 在Vue Js中创建Interactice时间线

我正在Vue.js中创建一个交互式时间线，并设置了一个基本代码。当前发生的情况是，当您选择一年时，内容会显示出来，但要使其消失，您需要再次单击它

我想做的是当你点击下一年时，让上一年的内容消失。 我创建的代码笔链接如下：

如您所见，我的Vue JS代码具有不同的显示数据的设置

var vue = new Vue({
el:"#app",
data: {
    nowShowing: false,
    nowShowing2: false,
    nowShowing3: false,
    nowShowing4: false,
    isShowing:false,

    message: 'test1',
    message2: 'test2',
    message3: 'test3',
    message4: 'test4',
    message5: 'test5',
}});

然后进入HTML，你有一个按钮类

<button class="c-History__year" @click="isShowing ^= true">1880</button>

1880

和div类：

<div v-show="isShowing">
    <p class="c-History__summary">
        {{message}}
    </p>
</div>

{{message}}

---

这是否可以在Vue中通过转换来完成，或者CSS就足够了？

您可以使用另一种更简单的方法来完成，首先您可以像这样更改

数据结构：

var vue = new Vue({
    el:"#app",
    data: {
        message: 'test1',
        message2: 'test2',
        message3: 'test3',
        message4: 'test4',
        message5: 'test5',
        contentToShow: ''
    },
  methods: {
    showContent(messageIndex) {
      this.contentToShow = this[messageIndex]
    }
  }
})

我们的想法是使用一种方法，在该方法中，您将传递消息属性的
索引
，并只设置一个可见的
内容显示

因此，您的组件将被更新

<div id="app">
  <div class="o-Container o-Container--padded">
        <div class="c-History">
            <div class="c-History__timeline">
                <div class="c-History__years">
                    <span class="c-History__line"></span>
                    <button class="c-History__year" @click="showContent('message')">1880</button>
                    <button class="c-History__year" @click="showContent('message2')">1938</button>
                    <button class="c-History__year" @click="showContent('message3')">1971</button>
                    <button class="c-History__year" @click="showContent('message4')">1982</button>
                    <button class="c-History__year" @click="showContent('message5')">2007</button>
                </div>
            </div>
        </div>
        <transition name="bounce">
            <div v-show="contentToShow">
                <p :key="contentToShow" class="c-History__summary">
                    {{contentToShow}}
                </p>
            </div>
        </transition>
    </div>
</div>
</div>


1880
1938
1971
1982
2007

{{contentToShow}

我已将所有
isShowing
变量捆绑到一个变量中，div现在正在查找
isShowing
变量是否有特定的编号，如果有，div将显示，所有其他变量将隐藏

JS:

HTML:


1880
1938
1971
1982
2007

{{message}}


{{message2}}


{{message3}}


{{message4}}


{{message5}}

精彩的解释和解决方案谢谢。请对我的问题投赞成票：）请对我的问题投赞成票。谢谢你的解释，这个解决方案也有效，但是第一个解决方案对以后的工作更有效：）
 const vue = new Vue({
        el:"#app",
        data: {
            showing: -1,

            message: 'test1',
            message2: 'test2',
            message3: 'test3',
            message4: 'test4',
            message5: 'test5',
        },})

<div id="app">
  <div class="o-Container o-Container--padded">
        <div class="c-History">
            <div class="c-History__timeline">
                <div class="c-History__years">
                    <span class="c-History__line"></span>
                    <button class="c-History__year" @click="showing = 0">1880</button>
                    <button class="c-History__year" @click="showing = 1">1938</button>
                    <button class="c-History__year" @click="showing = 2">1971</button>
                    <button class="c-History__year" @click="showing = 3">1982</button>
                    <button class="c-History__year" @click="showing = 4">2007</button>
                </div>
            </div>
        </div>
        <transition name="bounce">
            <div v-show="showing == 0">
                <p class="c-History__summary">
                    {{message}}
                </p>
            </div>
        </transition>
        <transition name="bounce">
            <div v-show="showing == 1">
                <p class="c-History__summary">
                    {{message2}}
                </p>
            </div>
        </transition>
        <transition name="bounce">
            <div v-show="showing == 2">
                <p class="c-History__summary">
                    {{message3}}
                </p>
            </div>
        </transition>
        <transition name="bounce">
            <div v-show="showing == 3">
                <p class="c-History__summary">
                    {{message4}}
                </p>
            </div>
        </transition>
        <transition name="bounce">
            <div v-show="showing == 4">
                <p class="c-History__summary">
                    {{message5}}
                </p>
            </div>
        </transition>
    </div>
</div>
</div>