时间戳

首页 > 解决方案 > 在 Vue Js 中创建交互时间线

vue.js - 在 Vue Js 中创建交互时间线

问题描述

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

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

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>

和 div 类：

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

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

标签： vue.jsvue-component

解决方案

我已经将所有isShowing变量捆绑到一个中，并且 div 现在正在寻找isShowingvar 是否具有特定数字，以及何时会显示 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>

推荐阅读