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的唯一性
如果图片加载不出来，尝试一下
url: require("../../assets/ckBG.jpg")
