vue实现轮播效果
效果如下：（不好意思，图有点大；）
功能：点击左侧图片，右侧出现相应的图片；同时左侧边框变颜色。
代码如下：（也可以直接下载文件）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <script src="vue.js"></script> </head> <body> <div id="app"> <!-- 左侧img图片 --> <div class="leftlList "> <div v-for="(leftImg,index) in leftImgs" :key = "index"> <label :key="index + 'A'">{{ index + 1 }}</label> <div @click="clickImg(index)" :key="index + 'B'" class="img" :class="[leftIndex == index?'listImgActived': '']"> <img :src="leftImg.url"> <!-- 11111 --> </div> </div> </div> <!-- 分割线 --> <div class="string"></div> <!-- 中间展示的图片 --> <div class="centerImg" v-for="(leftImg,index) in leftImgs" :key="index + 'C'"> <img :src="leftImg.url" v-show="index == leftIndex"> </div> </div> <script> new Vue({ el: '#app', data: { leftIndex: 0, leftImgs: [{ url: 'src/assets/a.jpg' }, { url: 'src/assets/b.jpg' }, { url: 'src/assets/c.jpg' }, { url: 'src/assets/d.jpg' } ] }, methods: { clickImg(index) { this.leftIndex = index; } } }); </script> <style> body { padding: 0; margin: 0 } #app { position: absolute; background-color: black; width: 100%; height: 100%; } .leftlList { color: white; position: absolute; margin-top: 40px; margin-left: 40px; width: 190px; height: calc(100% - 80px); } .leftlList div .img { display: inline-block; margin: 16px 14px; text-align: center; vertical-align: middle; /* width: 130px; height: 130px; line-height: 130px; */ } .leftlList div .img img { width: 130px; height: 130px; line-height: 130px; } #app .string { position: absolute; margin-left: 220px; margin-top: 40px; height: calc(100% - 80px); border: 2px solid pink; display: inline-block; } .centerImg { position: absolute; width: calc(100% - 430px); margin-left: 300px; margin-top: 70px; text-align: center; vertical-align: middle; } .listImgActived { border: 2px solid aqua; } </style> </body> </html>
如果左侧不是图片，而是文字的话；
可以把
/* width: 130px; height: 130px; line-height: 130px; */这三行代码取消。另外，如果出现下面这样的报错的话：
是因为key的值重复了。所以，只需要把key的值改下就可以了：
例：
<div v-for="(leftlist, index) in leftlists" :key="index"></div>
<div v-for="(leftlist, index) in leftlists2" :key="'I'+ index"></div>
<div v-for="(leftlist, index) in leftlists3" :key="'II',+ index"></div>
这里例子中的 I,II 字符可以替换成你自己定义的任意字符，只是为了保证key的唯一性
来源：博客园
作者：web与webGL
链接：https://www.cnblogs.com/yaosusu/p/11523755.html