vue中对对象数组的对比

有一个问题，就是vue cli中两个对象数组我想把他们的id分别取出来进行对比，就好比说一个里面有五个对象一个里面有四个对象。我想在这五个对象中对比出拥有于这五个对象里面id相同的四个对象，并对这五个对象中的四个对象添加一些样式，求一个具体的实现方法

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-button type="primary" @click="addStyles">添加样式</el-button>
    </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                arr1:[{id:1},{id:2},{id:3},{id:4},{id:5}],
                arr2:[{id:1},{id:2},{id:4},{id:5}]
            }
        },
        methods: {
            addStyles() {
                let arr2Ids = this.arr2.map(item => item.id)
                this.arr1.forEach(item => {
                    if(arr2Ids.includes(item.id)){
                        item.style = "我想添加的样式"
                    }
                });
                console.log(JSON.stringify(this.arr1,null,4))
            }
        },
    })
</script>
</html>
<script>
let a =[
  {id: 1, label: '1', active: false},
  {id: 2, label: '1', active: false},
  {id: 3, label: '1', active: false},
  {id: 4, label: '1', active: false},
  {id: 5, label: '1', active: false},
]
let b =[
  {id: 1, label: '1'},
  {id: 2, label: '1'},
  {id: 3, label: '1'},
  {id: 4, label: '1'},
]
a.forEach(item => {
  b.forEach(o => {
    if (item.id === o.id) {
      item.active = true
    }
  })
})
console.log(JSON.stringify(a))
// 然后根据a数组的active属性为true添加样式<div v-for="item in a" :class={active: item.active}>选中<div>
</script>
你好，在vue cli 中 item.style 用不了该怎么写这一行
你好，这个数据a的列表是用 elementui的table组件渲染的，该怎么处理样式
而且数据 a和b 都是后台的数据加不了 active
ajax获取数据后循环加了再赋值给循环表格的数组对象
那这个添加样式的for循环应该写在 el-table 上面吗
什么dom需要这个样式就加到那个dom上，css里面要.active{css样式}