想在页面中添加轮播图效果，然而 swiper 的文档没有 swiper-slide for 循环对象 的用法，翻遍文档中的案例都是固定的 slied1,2,3,4,5 的值
<div class="swiper-slide">slide1</div>
<div class="swiper-slide">slide2</div>
<div class="swiper-slide">slide3</div>
<div class="swiper-slide">slide4</div>
<div class="swiper-slide">slide5</div>
我想知道类似于 vue.js 中vue-awesome-swiper 的 v-for 用法如：
<swiper-slide v-for="(page, index) of pages" :key="index">
这是部分原 html： https://pastebin.com/pMEgymrK 这是部分渲染后的 html： https://pastebin.com/U8SLANEX
 |
1
paloalto Aug 30, 2018
为什么不在模板里循环输出？你前端用的什么模板？是 python 的 mako 吗？去搜对应的模板循环语法就可以了。
|
|
2
paloalto Aug 30, 2018
% for item in list:
<div class="swiper-slide">item-${row}</div> % endfor |
 |
5
doommm Aug 30, 2018
`v-for`列表渲染`swiper-item`，然后外面用一个 container 包起来，这是用 vue 包装过后的用法。
用 jQuery 的话思路应该也差不多吧，遍历列表创建`swiper-item`对应的 dom 节点，然后用`swiper`加载？ 稍微看一看`vue-awesome-swiper`的源码应该就明白了 |
 |
7
xusongfu5050 Aug 31, 2018
可以，我就这么干过，我使用的 VUE,直接 v-for
|
 |
9
elsagong OP @xusongfu5050 我知道 vue 可以用 v-for，我现在用的是 swiper，不是 vue-awesome-swiper，不是 vue.........所以不能用 v-for。
|
|
10
xusongfu5050 Feb 2, 2019
@elsagong 我用的也是 swiper,不是 vue-awesome-swiper，如果你没有用 vue,你就用原生 js 循环生成<div class="swiper-slide">slide1</div>,然后 appendTo 父元素应该就可以了吧。
|
Select Language