vue 简单的抽奖Demo-白红宇的个人博客

vue 简单的抽奖Demo

发布日期：2021-05-04 14:31:22 浏览次数：30 分类：原创文章

本文共 1882 字，大约阅读时间需要 6 分钟。

简陋的抽奖Demo

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>抽奖Demo</title>    <script src="vue.js"></script></head><body>    <div id="id01">        <p>{  {score}}</p>        <p>{  {level}}</p>        <input type="button" value="开始抽奖" @click="start()">        <input type="button" value="停止抽奖" @click="stop()">    </div></body></html><script>    var vm = new Vue({            el: "#id01",        data: {                score: 0,            level: null,            intervalIndex: null        },        methods: {                start() {                    if (this.intervalIndex == null) {                        this.intervalIndex = setInterval(() => {                            // Math.random() 生成 0-1 之间的随机数【但是小数位有点长】                        // parseInt() 转换成整型                        this.score = parseInt(Math.random() * 100);                        switch (true) {                                case this.score <= 50:                                this.level = "幸运奖"                                break;                            case this.score <= 80 && this.score > 50:                                this.level = "三等奖"                                break;                            case this.score <= 90 && this.score > 80:                                this.level = "二等奖"                                break;                            case this.score > 90:                                this.level = "一等奖"                                break;                        }                    }, 50);                }            },            stop() {                    clearInterval(this.intervalIndex);                this.intervalIndex = null            }        },    })</script>

笔记：

v-cloak【当全部数据加载后才会渲染出来】

v-bind:【可以加载vue里面的数据】简写为[:]

v-on 绑定事件简写[@]

一点点笔记，以便以后翻阅。

上一篇：Vue v-model 双向绑定

下一篇：C# .net Framework Windows窗体应用【02】

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

简陋的抽奖Demo

发表评论

最新留言

关于作者

推荐文章