vue九宫格抽奖代码实例

在Vue.js中实现一个九宫格抽奖功能，通常涉及到组件化、状态管理以及可能的动画效果。以下是一个简单的Vue组件示例，这个组件会展示一个九宫格，用户点击格子进行抽奖：

<template>
  <div class="grid-container">
    <div v-for="(item, index) in gridItems" :key="index" class="grid-item" @click="draw(index)">
      <button :class="{ 'active': isCurrentItem(item.id) }">{{ item.name }}</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridItems: [
        { id: 1, name: '奖品1' },
        // 其他8个奖品...
      ],
      current奖品: null,
    };
  },
  methods: {
    draw(index) {
      this.current奖品 = this.gridItems[index];
      // 在这里添加抽奖逻辑，比如更新状态或发出请求
    },
    isCurrentItem(itemId) {
      return this.current奖品 && this.current奖品.id === itemId;
    },
  },
};
</script>

<style scoped>
.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 1;
  margin: 5px;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
  cursor: pointer;
}

.active {
  background-color: #ffeb3b; /* 高亮颜色 */
}
</style>

这个例子中，`gridItems`数组包含九个奖品对象，每个按钮代表一个格子，点击后`draw`方法会被调用，设置当前选中的奖品。你可以根据需求扩展抽奖逻辑，如从服务器获取奖品信息、限制次数等。