vue 创建一个数组,从1-9 ,开始遍历集合 如果相同则给1 如果不存在给0,并赋值
时间: 2024-05-13 17:16:25 浏览: 20
可以使用 JavaScript 的 Array 对象来创建一个长度为 9 的数组,然后通过循环遍历集合,判断集合中是否包含当前数组元素,如果包含则在结果数组中赋值为 1,否则赋值为 0。
以下是示例代码:
```html
<template>
<div>
<div v-for="(item, index) in result" :key="index">
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
collection: [2, 3, 4, 7, 9],
result: []
};
},
created() {
const arr = Array.from({ length: 9 }, (_, i) => i + 1);
this.result = arr.map(item => (this.collection.includes(item) ? 1 : 0));
}
};
</script>
```
在上面的代码中,我们首先在 `data` 中定义了一个 `collection` 数组,表示给定的集合。然后我们定义了一个 `result` 数组,用来保存遍历结果。
在 `created` 钩子函数中,我们首先使用 `Array.from` 方法创建了一个长度为 9 的数组,然后使用 `map` 方法遍历该数组,根据当前元素是否在 `collection` 中出现来给 `result` 数组赋值。
最后在模板中通过 `v-for` 指令遍历 `result` 数组,并将每个元素渲染到页面中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)