在 Vue Js 中创建交互式时间线

Question

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

我正在尝试做的是当您单击另一年时使上一年的内容消失。 我创建的 Codepen 链接如下：

Vue JS Timeline

如您所见，我的 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>

还有 div 类：

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

这可以在 Vue 中通过过渡完成还是 CSS 就足够了？

Answer 1

我已将所有 isShowing 变量捆绑到一个中，并且 div 现在正在寻找 isShowing var 是否具有特定数字，当有特定数字时，将显示该 div 而隐藏所有其他变量。

JS：

 const vue = new Vue({
        el:"#app",
        data: {
            showing: -1,

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

HTML：

<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>

Answer 2

你可以用一种不同的更简单的方法来做到这一点，首先你可以像这样改变你的data结构：

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]
    }
  }
})

这个想法是有一个方法，你将传递消息属性的index，并且只设置一个可见的contentToShow

所以你的组件更新将是

<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>