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")
