VUE实现的九宫格抽奖功能

最新推荐文章于 2022-11-03 11:47:39 发布

霜如明月

最新推荐文章于 2022-11-03 11:47:39 发布

阅读量5.1k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/q3254421/article/details/85255075

版权

本文介绍了如何使用Vue框架实现一个九宫格抽奖功能。包括HTML布局、SCSS样式和JavaScript逻辑代码，旨在帮助1-3年经验的前端开发者提升技能，群内提供PDF资料及实战项目视频。

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

效果图如下：

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。
HTML代码：

<template>
 <div class="luckDraw">
  <title-bar :title="title"></title-bar>
  <div class="container">
   <div class="turntable-wrapper">
    <div class="luck-wrapper">
     <p class="integral">我的积分: <span>1000</span></p>
     <ul class="nineGrid">
      <li class="row">
       <div v-for="(n, key) in 3" :key="n" :class="index === key ? `active` : ``">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" alt="">
         <p>8金转</p>
        </div>
        <div class="mask"></div>
       </div>
      </li>
      <li class="row">
       <div :class="index === 7 ? 'active': ''">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" alt="">
         <p>128金转</p>
        </div>
        <div class="mask"></div>
       </div>
       <div class="getLuck" @click="startLottery">
        <p>立即<br>抽奖</p>
       </div>
        <div :class="index ===