有两组奖品，每组奖品都有对应的奖品展示，两组奖品的数据是统一的，点击两组奖品下面的按钮不管哪一个，选到了其中的一个奖品，就要把这个奖品移出去，另一组的奖品也要对应移出去，并且每次抽奖还要展示抽到的内容

最新推荐文章于 2024-10-01 20:12:28 发布

程序员量量

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量485

点赞数 11

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_71055606/article/details/135850214

版权

本文介绍了一个使用Vue.js编写的动态抽奖应用，用户可以点击按钮从奖品列表中随机选择一个奖品，当所有奖品被选完时，会显示已无奖品。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <div class="lottery-info">{{ lotteryResult }}</div>
    <div class="lottery-wrapper">
      <div class="lottery" v-bind:class="{ disabled: noRemainingPrize(0) }">
        <div class="lottery-item" v-for="(prize, index) in prizes" :key="index" v-if="!prize.selected">
          {{ prize.name }}: {{ prize.percentage }}%
        </div>
        <div class="lottery-btn" v-on:click="onLotteryClick(0)" v-bind:disabled="noRemainingPrize(0)">
          {{ noRemainingPrize(0) ? '已无奖品' : '抽奖' }}
        </div>
      </div>
      <div class="lottery" v-bind:class="{ disabled: noRemainingPrize(1) }">
        <div class="lottery-item" v-for="(prize, index) in prizes" :key="index" v-if="!prize.selected">
          {{ prize.name }}: {{ prize.percentage }}%
        </div>
        <div class="lottery-btn" v-on:click="onLotteryClick(1)" v-bind:disabled="noRemainingPrize(1)">
          {{ noRemainingPrize(1) ? '已无奖品' : '抽奖' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '奖品1', percentage: 20, selected: false },
        { name: '奖品2', percentage: 30, selected: false },
        { name: '奖品3', percentage: 25, selected: false },
        { name: '奖品4', percentage: 15, selected: false },
        { name: '奖品5', percentage: 10, selected: false }
      ],
      lotteryResult: ''
    };
  },
  methods: {
    onLotteryClick(index) {
      const prizes = this.prizes.filter(prize => !prize.selected);
      const length = prizes.length;
      if (length === 0) {
        return;
      }
      const selected = Math.floor(Math.random() * length);
      prizes[selected].selected = true;
      this.lotteryResult = `恭喜您获得了 ${prizes[selected].name}！`;
    },
    noRemainingPrize(index) {
      const remainingPrizes = this.prizes.filter(prize => !prize.selected);
      return remainingPrizes.length === 0;
    }
  }
};
</script>

<style>
.lottery-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.lottery {
  width: 200px;
  background-color: #f5f5f5;
  padding: 10px;
}

.lottery-item {
  margin-bottom: 5px;
}

.lottery-btn {
  background-color: #2196f3;
  color: #fff;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

.lottery-info {
  margin-top: 20px;
}

.disabled {
  opacity: 0.6;
  cursor: default;
}
</style>