vue中对对象数组的对比

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

解决方案 »

  1.   


    <!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>
    <!-- 先引入 Vue -->
    <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>