vue随机生成1-100的数并使用v-for循环出来
时间: 2023-09-20 09:08:14 浏览: 124
可以用以下代码实现:
```html
<template>
<div>
<div v-for="num in nums" :key="num">{{ num }}</div>
</div>
</template>
<script>
export default {
data() {
return {
nums: []
}
},
mounted() {
for (let i = 0; i < 10; i++) {
this.nums.push(Math.floor(Math.random() * 100 + 1))
}
}
}
</script>
```
这里使用 `v-for` 循环遍历 `nums` 数组,然后将数组中的每个随机生成的数渲染到页面上。在 `mounted` 钩子函数中使用 for 循环生成 10 个随机数,并将其 push 到 `nums` 数组中。关于随机数的生成,使用了 `Math.random()` 函数,它返回一个 0 到 1 之间的伪随机数,然后乘以 100 并加上 1,这样就可以得到一个 1 到 100 之间的整数。
相关问题
vue2 循环生成的el-tag标签添加随机背景色并设置字体颜色为纯白
在 Vue2 中,可以通过 `v-for` 指令循环生成 `el-tag` 标签,并通过 `:style` 绑定动态样式来设置随机背景色和字体颜色为纯白。示例代码如下:
```
<template>
<div>
<el-tag v-for="(tag, index) in tags" :key="index" :style="{ backgroundColor: tag.color, color: '#fff' }">{{ tag.name }}</el-tag>
</div>
</template>
<script>
export default {
data() {
return {
tags: [
{ name: '标签1', color: getRandomColor() },
{ name: '标签2', color: getRandomColor() },
{ name: '标签3', color: getRandomColor() },
{ name: '标签4', color: getRandomColor() },
{ name: '标签5', color: getRandomColor() }
]
}
}
}
function getRandomColor() {
const colors = ['#f50', '#2db7f5', '#87d068', '#108ee9', '#f04134', '#a5673f']
return colors[Math.floor(Math.random() * colors.length)]
}
</script>
```
在上述代码中,`getRandomColor` 函数用于随机生成颜色值,`tags` 数组中包含了标签的名称和颜色,`v-for` 指令循环遍历该数组,动态生成 `el-tag` 标签,并通过 `:style` 绑定动态样式来设置标签的背景色和字体颜色。
vue生成随机列表
要生成随机列表,你可以使用Vue.js框架提供的v-for指令和计算属性来实现。
首先,在Vue实例中定义一个数组,用于存储随机列表的数据。然后,通过计算属性生成一个随机的数组,将其绑定到v-for指令上,即可在页面中渲染出随机列表。
下面是一个示例代码,可以参考一下:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in randomList" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: ['Apple', 'Banana', 'Orange', 'Pear', 'Grape', 'Pineapple', 'Watermelon', 'Mango'],
};
},
computed: {
randomList() {
return this.shuffleArray(this.list);
},
},
methods: {
shuffleArray(arr) {
let i = arr.length;
while (i > 0) {
const j = Math.floor(Math.random() * i);
const temp = arr[i - 1];
arr[i - 1] = arr[j];
arr[j] = temp;
i--;
}
return arr;
},
},
};
</script>
```
在这个示例代码中,我们通过shuffleArray方法来生成随机数组。这个方法将数组中的元素打乱顺序,并返回打乱后的数组。然后,我们将这个随机数组绑定到v-for指令上,通过循环渲染出随机列表。
需要注意的是,为了避免重复元素,我们需要在生成随机数组时对原数组进行复制。另外,我们还需要在v-for指令中加上:key属性,来提高渲染效率。