2024-05-10
2024-05-09 本文已影响0人
李先生1818
<template>
<div id="app">
<button @click="generateNumbers">生成10注号码</button>
<div class="DLTCON" v-for="(numbers, index) in generatedNumbers" :key="index">
<span class="DLTfront" v-for="(num1, idx1) in numbers.front" :key="idx1+'q'"
@click="clickFront(num1,idx1,index,'front')">
{{num1}}
</span>
<span> - </span>
<span class="DLTback" v-for="(num2, idx2) in numbers.back" :key="idx2+'h'"
@click="clickFront(num2,idx2,index,'back')">
{{num2}}
</span>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
generatedNumbers: [],
seleData: []
}
},
mounted() {
},
methods: {
clickFront(num, idx, index, sign) {
this.seleData.push(num)
this.seleData.push(idx)
this.seleData.push(index)
this.seleData.push(sign)
console.log(this.seleData)
if (sign === 'front') {
}
if (sign === 'back') {
}
console.log(num, idx, index)
console.log(this.generatedNumbers)
},
submit() {
},
getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
generateNumbers() {
this.generatedNumbers = Array.from({
length: 10
}, () => ({
front: this.getRandomNumbers(1, 35, 5),
back: this.getRandomNumbers(1, 12, 2)
}));
this.generatedNumbers.forEach(item => {
item.front = item.front.sort((a, b) => {
return a - b
})
item.back = item.back.sort((a, b) => a - b)
})
},
getRandomNumbers(min, max, count) {
const numbers = [];
while (numbers.length < count) {
const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
if (!numbers.includes(randomNum)) {
numbers.push(randomNum);
}
}
return numbers;
},
}
}
</script>
<style scoped="scoped">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.DLTCON {
margin-top: 10px;
}
.DLTfront {
width: 30px;
display: inline-block;
cursor: pointer;
}
.DLTback {
width: 30px;
display: inline-block;
cursor: pointer;
}
</style>