Vue点击小图切换大图

灬日落

已于 2022-03-18 09:14:34 修改

阅读量1.6k

点赞数 2

文章标签： webview html css

于 2022-03-18 08:42:03 首次发布

本文链接：https://blog.csdn.net/weixin_57661986/article/details/123565545

版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.ee {

height: 500px;

width: 800px;

}

.cc {

height: 400px;

width: 800px;

}

.cc img {

height: 400px;

width: 500px;

}

.ww {

height: 100px;

width: 500px;

display: flex;

justify-content: space-between

}

.ww img {

height: 100px;

width: 100px;

}

</style>

</head>

<body>

<div id="app">

<div class="ee">

<div class="cc">

<img :src="handoff" alt="">

</div>

<div class="ww">

<img @click="change('/imgs/2.jpg')" src="/imgs/2.jpg" alt="">

<img @click="change('/imgs/3.jpg')" src="/imgs/3.jpg" alt="">

<img @click="change('/imgs/5.jpg')" src="/imgs/5.jpg" alt="">

<img @click="change('/imgs/6.jpg')" src="/imgs/6.jpg" alt="">

</div>

</div>

</div>

<script src="./vue.js"></script>

<script>

var app = new Vue({

el: '#app',

data: {

handoff: '/imgs/2.jpg'

},

methods: {

change: function (url) {

this.handoff=url

}

}

})

</script>

</body>

</html>