在vue组件中使用v-for的基础轨道

时间:2017-01-11 08:42:47

标签: javascript zurb-foundation vue-component vuejs2 orbit

我有.hero{ background-color:#5FCF80; height: 80vh; top: 0; margin: 0; } body{ margin: 0; /* font-family: 'Varela Round', sans-serif; */ font-family: 'Roboto', sans-serif; } header{ display: block; padding: 20px; background-color: white; width: 100%; top: 0; } title{ padding: px 20px; display:table-cell; vertical-align:middle; font-size: 19px; } 需要数据库中的一些数据,这些数据包括图片标题和一些文字。我使用foundation orbit如下:

vue component

我需要从api中获取所有信息,它会获取第一个信息并将其余部分堆积在其下而不是滑动。我可以在哪里放置... <template> <div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit> <div v-for="development in components.other_developments"> <ul class="orbit-container" style="height: 500px"> <h1 class="other-developments-orbit-title">{{development.name}}</h1> <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button> <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button> <p class="other-developments-orbit-text">{{development.description}}</p> <a class="other-developments-orbit-button button" id="custom-button">VISIT WEBSITE <i class="fa fa-long-arrow-right" aria-hidden="true"></i> </a> <li class="is-active orbit-slide" data-use-m-u-i="false"> <img class="other-developments-image orbit-image" :src="development.image_url" alt="Space"> </li> </ul> </div> </div> </template> ... 以使其与所有数据一起滑动。

1 个答案:

答案 0 :(得分:0)

我还没有找到这个,但更好的解决方案是使用Slick Carousel