加入3个res.data的vue.js

要将3个res.data添加到Vue.js中，你可以使用Vue的响应式数据和computed属性来实现。下面是一个示例代码：

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    res: {
      data1: [],
      data2: [],
      data3: []
    }
  },
  computed: {
    items() {
      return [...this.res.data1, ...this.res.data2, ...this.res.data3];
    }
  },
  mounted() {
    // 在mounted钩子函数中模拟获取数据
    setTimeout(() => {
      this.res.data1 = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ];
      this.res.data2 = [
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
        { id: 6, name: 'Item 6' }
      ];
      this.res.data3 = [
        { id: 7, name: 'Item 7' },
        { id: 8, name: 'Item 8' },
        { id: 9, name: 'Item 9' }
      ];
    }, 2000);
  }
});

在上面的示例中，我们首先定义了一个包含3个空数组的res对象，然后在computed属性中将这3个数组合并为一个新的数组。最后，在mounted钩子函数中模拟获取数据并将其分配给对应的res.data成员。

这样，当数据获取完成后，items数组会自动更新，并在页面上显示所有的数据项。