uniapp 用Vue2将两个list拼接成一个array
时间: 2023-12-02 11:03:12 浏览: 65
可以使用concat()方法将两个数组拼接成一个数组。示例代码如下:
```js
let list1 = [1, 2, 3];
let list2 = [4, 5, 6];
let array = list1.concat(list2);
console.log(array); // [1, 2, 3, 4, 5, 6]
```
在Vue组件中,你可以将list1和list2作为data中的两个数组,并在模板中使用concat()方法来拼接它们:
```html
<template>
<div>
<ul>
<li v-for="item in list1">{{ item }}</li>
</ul>
<ul>
<li v-for="item in list2">{{ item }}</li>
</ul>
<ul>
<li v-for="item in array">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list1: [1, 2, 3],
list2: [4, 5, 6],
array: []
};
},
mounted() {
this.array = this.list1.concat(this.list2);
}
};
</script>
```
在mounted()生命周期中,将list1和list2拼接成array数组,并将其赋值给组件的data属性array,然后在模板中使用v-for指令来遍历array数组。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)