vue 随机数

// 在 Vue 组件中生成随机数的示例代码

<template>
  <div>
    <p>随机数: {{ randomNumber }}</p>
    <button @click="generateRandomNumber">生成新随机数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      randomNumber: Math.floor(Math.random() * 100) // 初始随机数，范围在 0 到 99 之间
    };
  },
  methods: {
    generateRandomNumber() {
      this.randomNumber = Math.floor(Math.random() * 100); // 点击按钮时生成新的随机数
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

• Math.random() 生成一个介于 0（包括）和 1（不包括）之间的随机浮点数。
• Math.floor() 将浮点数向下取整，确保我们得到的是一个整数。
• Math.random() * 100 将随机数的范围扩大到 0 到 99 之间。
• data() 函数返回一个对象，包含组件的状态。这里我们用 randomNumber 来存储生成的随机数。
• methods 中定义了 generateRandomNumber 方法，当用户点击按钮时调用此方法，重新生成随机数并更新 randomNumber 的值。
• 模板部分使用了双大括号语法 {{ randomNumber }} 来显示当前的随机数，并绑定了一个按钮点击事件来触发生成新随机数的操作。