前端vue实现概率

前端Vue实现概率功能

在Vue中实现概率功能通常涉及随机数生成、概率计算和结果展示。以下是几种常见的实现方式：

使用Math.random()实现基础概率

// 在Vue方法中实现50%概率
methods: {
  triggerProbability() {
    const random = Math.random() // 生成0-1之间的随机数
    if (random < 0.5) {
      console.log('50%概率触发成功')
    } else {
      console.log('未触发')
    }
  }
}

配置不同概率的事件

data() {
  return {
    probabilityEvents: [
      { name: '一等奖', probability: 0.01 },
      { name: '二等奖', probability: 0.1 },
      { name: '三等奖', probability: 0.2 },
      { name: '谢谢参与', probability: 0.69 }
    ]
  }
},
methods: {
  drawLottery() {
    let random = Math.random()
    let cumulativeProbability = 0

    for (const event of this.probabilityEvents) {
      cumulativeProbability += event.probability
      if (random < cumulativeProbability) {
        console.log(`抽中了: ${event.name}`)
        return
      }
    }
  }
}

使用Vue响应式展示概率结果

<template>
  <div>
    <button @click="calculateProbability">点击抽奖</button>
    <p v-if="result">结果: {{ result }}</p>
    <p>历史记录: {{ history.join(', ') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: '',
      history: []
    }
  },
  methods: {
    calculateProbability() {
      const rand = Math.random()
      this.result = rand < 0.3 ? '成功' : '失败'
      this.history.push(this.result)
    }
  }
}
</script>

实现加权随机算法

对于需要不同权重的概率场景：

methods: {
  weightedRandom(items, weights) {
    let totalWeight = weights.reduce((a, b) => a + b, 0)
    let random = Math.random() * totalWeight

    for (let i = 0; i < items.length; i++) {
      if (random < weights[i]) return items[i]
      random -= weights[i]
    }

    return items[items.length - 1]
  },
  useWeightedRandom() {
    const prizes = ['黄金', '白银', '铜']
    const weights = [1, 3, 6] // 对应概率为10%, 30%, 60%
    const result = this.weightedRandom(prizes, weights)
    console.log('抽中了:', result)
  }
}

使用第三方库

对于更复杂的概率需求，可以考虑使用专门的概率库：

import Random from 'random-js'

methods: {
  useRandomEngine() {
    const engine = Random.engines.mt19937().autoSeed()
    const distribution = Random.real(0, 1)
    const randomValue = distribution(engine)

    if (randomValue < 0.25) {
      console.log('25%概率事件触发')
    }
  }
}

这些方法可以根据具体需求进行调整和组合，实现各种概率相关的功能。