本文介绍如何在Vue.js项目中实现模拟蚂蚁森林能量球的收集功能。通过HTML布局、CSS样式以及JavaScript逻辑，点击带有随机能量值的小球后，计算所有小球能量总和并显示在大能量球中。在遇到问题时，通过在ballList数组中添加新对象存储随机数，并更新数据来实现功能。
想要效果，点击前
点击后
技术栈：vue js
HTML：
<div class="main_contain">
<div v-for="(item,index) in ballList" :key="index" class="ball_small" :style="{top:item.top+'px',left:item.left+'px',transition:'all 2s'}">
10
</div>
<div class="main_ball" @click="in_ball">100</div>
</div>
data:控制浮动能量小球的位置
data() {
return {
ballList:[
{
top:120,
left:20,
},
{
top:20,
left:80,
},
{
top:20,
left:160,
},
{
top:120,
left:320,
},
]
}
点击小球后，小球的移动位置：
in_ball(){
this.ballList[0].left=150
this.ballList[1]
最低0.47元/天 解锁文章
扫一扫
2497
到【灌水乐园】发言
