67 lines
1.8 KiB
HTML
67 lines
1.8 KiB
HTML
<!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>样式绑定</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|
<style>
|
|
body,ul{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body,html,#app,.main {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
ul li {
|
|
list-style: none;
|
|
}
|
|
.onActive {
|
|
color: red;
|
|
}
|
|
.weight {
|
|
font-weight: bolder
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app">
|
|
<div class="main" :style="{background: `url(${currents})`}">
|
|
<ul>
|
|
<li v-for="item in imgList">
|
|
<img :src="item.url" alt="" @click="changeImg(item.url)">
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
currents: 'https://yanxuan.nosdn.127.net/43c9272008bd5af7d259eb9afdcf9c68.jpg?imageView&thumbnail=420x420',
|
|
imgList: [
|
|
{ url: 'https://yanxuan.nosdn.127.net/43c9272008bd5af7d259eb9afdcf9c68.jpg?imageView&thumbnail=420x420' },
|
|
{ url: 'https://yanxuan.nosdn.127.net/3e95a7c4c5d78f9ad6e925d8a3248af0.jpg?imageView&quality=95&thumbnail=420x420' },
|
|
{ url: 'https://yanxuan.nosdn.127.net/a4f49393001daef6c1ae9d9dcb2614c9.jpg?imageView&quality=95&thumbnail=420x420' }
|
|
]
|
|
},
|
|
methods: {
|
|
changeImg(imgurl) {
|
|
this.currents = imgurl
|
|
this.changeHEllo()
|
|
}
|
|
},
|
|
computed: { // computed 会缓存计算结果，下次再被调用的时候不需要重新计算，一般用在一些计算上，例如购物车商品总价的计算
|
|
changeHEllo() {
|
|
console.log("changeHEllo")
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html> |