Question

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

我想做的是，当您单击另一年时，使上一年的内容消失。我创建的Codepen在下面链接：

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

在Vue Js中创建交互练习时间线

2 个答案: