为什么这个不能实现单击半透明div消失呢
0
悬赏园豆：5
[待解决问题]
<!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>
<style>
.mask{
width: 80px;
height: 150px;
background-color: #ffffff;
opacity: 0.5;
position: absolute;
}
.fuck{
display: none;
}
</style>
</head>
<body>
<div id="app" style="background-image:url(./images/click.jpg);height: 600px;">
<div v-for="(item, index) in [0, 1, 2, 3, 4]" :key="index" :style="[{left:index*120+'px'}]" @click="hide(index)" :class="[{fuck:show[index]},{mask:true}]">
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show:[false,false,false,false,false,]
},
methods: {
hide: function(index){
this.show[index] = true;
console.log(this.show[index], index,this.show)
}
},
})
</script>
</body>
</html>
你的代码中很多语法搞错了,有很多命名的都不是变量,只是字符串,这要用ES6语法
– 神曲不是曲 4年前看了下你资料,你是搞后端的吧,前端的语法不对哦
– 神曲不是曲 4年前