uniapp生成随机数

文章目录

1.使用 JavaScript 原生方法生成随机数

  • 在uniapp中,由于它基于Vue.js,可以直接使用 JavaScript 原生的Math.random()方法来生成随机数。
  • 例如,要生成一个介于 0(包含)和 1(不包含)之间的随机数:
javascript 复制代码
// 在uniapp的脚本部分(例如.vue文件的<script>标签内)
export default {
    methods: {
        generateRandomNumber() {
            let randomNum = Math.random();
            console.log(randomNum);
            return randomNum;
        }
    }
};
  • 如果要生成一个介于某个范围内的随机整数,例如介于min(包含)和max(包含)之间的随机整数,可以使用以下公式:
javascript 复制代码
// 在uniapp的脚本部分(例如.vue文件的<script>标签内)
export default {
    methods: {
        generateRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1))+min;
        }
    }
};
  • 然后可以在uniapp的模板或者其他方法中调用这个函数,例如:
html 复制代码
<template>
    <view @click="generateRandomInt(1, 100)">生成1到100之间的随机整数</view>
</template>

2.使用第三方库(如lodash,可选)

  • 如果项目中已经引入了lodash库,也可以使用lodash来生成随机数。lodash提供了更方便和功能丰富的随机数生成方法。
  • 首先需要安装lodash库(如果未安装):
bash 复制代码
npm install lodash
  • 在uniapp的脚本部分使用lodash生成随机数:
javascript 复制代码
import _ from 'lodash';

export default {
    methods: {
        generateRandomNumberWithLodash() {
            let randomNum = _.random(0, 1);
            console.log(randomNum);
            return randomNum;
        },
        generateRandomIntWithLodash(min, max) {
            let randomInt = _.random(min, max);
            console.log(randomInt);
            return randomInt;
        }
    }
};

同样,可以在模板中调用这些方法来生成随机数。不过,使用lodash库会增加项目的体积,如果只是简单的随机数生成需求,使用 JavaScript 原生方法就足够了。

希望本文对你有所帮助!如果你有任何问题或建议,欢迎在评论区留言。

关注我看更多有意思的文章哦!👉👉

相关推荐
wordbaby10 分钟前
搞不懂 px、dpi 和 dp?看这一篇就够了:图解 RN 屏幕适配逻辑
前端
程序员爱钓鱼12 分钟前
使用 Node.js 批量导入多语言标签到 Strapi
前端·node.js·trae
鱼樱前端14 分钟前
uni-app开发app之前提须知(IOS/安卓)
前端·uni-app
V***u45314 分钟前
【学术会议论文投稿】Spring Boot实战:零基础打造你的Web应用新纪元
前端·spring boot·后端
i听风逝夜1 小时前
Web 3D地球实时统计访问来源
前端·后端
iMonster1 小时前
React 组件的组合模式之道 (Composition Pattern)
前端
呐呐呐呐呢1 小时前
antd渐变色边框按钮
前端
元直数字电路验证1 小时前
Jakarta EE Web 聊天室技术梳理
前端
wadesir1 小时前
Nginx配置文件CPU优化(从零开始提升Web服务器性能)
服务器·前端·nginx
牧码岛1 小时前
Web前端之canvas实现图片融合与清晰度介绍、合并
前端·javascript·css·html·web·canvas·web前端