Question

我想要进行这样的调查：https://takecareof.com/survey/new在vue。我不需要任何动画我只想要幻灯片部分。我不知道从哪里开始。

Answer 1

另一种方式是编程路由。首先你问名字，然后路由到下一个问候该名称的组件，并且那样。

https://router.vuejs.org/en/essentials/navigation.html

Answer 2

对于vue中的基本幻灯片，您可以尝试以下操作：

HTML

#include <iostream>
#include "Student.h"

using namespace std;

Student::Student(int id,string name)
{
    this->id = id;
    this->name = name;
}

Student::printStudent()
{
    cout << id << "." << name << endl;
}

使用Javascript：

<div id="app">
  <nav class="slide-nav">
    <div 
       v-if="currentSlide > 0" 
       v-on:click="currentSlide--" 
       class="prev-slide">
      <i class="material-icons">chevron_left</i>
    </div>
    <div 
       v-if="currentSlide < slides.length-1" 
       v-on:click="currentSlide++" 
       class="next-slide">
      <i class="material-icons">chevron_right</i>
    </div>
  </nav>
  <div class="slide">
    <h2>{{slides[currentSlide].title}}</h2>
    <div class="slideContent" v-html="slides[currentSlide].content"></div>
  </div>
</div>

Codepen：https://codepen.io/hfoletto/pen/aGVRZM

每张幻灯片的标题和内容对象由let app = new Vue({ el: '#app', data: { slides: [ { title: 'Title 1', content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }, { title: 'Title 2', content: `Donec porttitor, ligula ut finibus efficitur, magna sapien eleifend sapien, accumsan consequat magna elit a leo.` }, { title: 'Title 3', content: `Vestibulum condimentum, neque ut tristique luctus, mi mauris egestas tellus, sed tincidunt tortor mi sed ante. Donec purus ipsum, auctor et volutpat ut, aliquet id magna.` } ], currentSlide: 0 } })数组数据属性保存。将slides属性初始化为0会使默认幻灯片成为第一个。

在HTML中，如果currentSlide属性大于0（又称第一张幻灯片）currentSlide，conditional rendering只显示prev按钮，而只有当currentSlide低于v-if="currentSlide > 0"数组中最后一个对象的索引位置：slides

使用上一页和下一页按钮中的v-if="currentSlide < slides.length-1" event handler，我们可以添加或减少v-on:click属性中的一项，因此内容会被动地更改。

注意：我在这里使用ES6 Template literals，但您不必这样做。

我强烈建议您深入了解Vue js Guide，它真的很直接！

如果您想添加一些动画，请查看Transitions & Animations Vue Guide。

祝福。

Answer 3

我建议您尝试Vueper Slides。具有更多功能的Vue JS幻灯片易于使用。

您只需要此标记：

<vueper-slides>
  <vueper-slide v-for="(slide, i) in slides" :key="i" :title="slide.title" :content="slide.content"></vueper-slide>
</vueper-slides>

如何使用Vue.js进行幻灯片调查

3 个答案: