vue，辨别两个对象里面相同属性的不同值，提取出来，给html页面添加高亮（商品对比）？

第一步 数组
msg: [

    {label: '好吃的汉堡11',jieshao: '150',img:'http://element-cn.eleme.io/2.0/static/hamburger.50e4091.png'},
    {label: '好吃的汉堡',jieshao: '150',img:'http://element-cn.eleme.io/2.0/static/hamburger.50e4091.png'}
  ]
第二步 渲染页面
<tr>

<th>名字</th><td:class="[item.label ? propName : 'mui-active', 'a']"

v-for="(item, $index) in Aabc":key="item.label">{{item.label}}</td>
</tr> 
第三步 dui () {

　　this.Aabc这个其实就是第一步的数组，是我通过props传过来的

   var aProps = Object.keys(this.Aabc[0])
   var bProps = Object.keys(this.Aabc[1])
    for (var a = 0; a < aProps.length; a++) {
        this.propName = aProps[a]
        if (this.Aabc[0][this.propName] !== this.Aabc[1][this.propName]) {
           console.log(this.propName, 'propName')
          // label  键的名字
    }
  }
}

第一个是我要遍历的数组，第二个是渲染对象里面的子项，因为我想做的是匹配这两个对象的哪些字段的值不同，

然后找出当前字段中的html给它添加class做一个高亮，第三部已经出来了this.propName名字是label，正好和第一个数组中的label值不一样说明这个判断正确，然后我的想法是能不能从html的使用v-for找到当前键的名字，然后通过第二歩和第三歩的对比，来添加高亮（有可能字段的值全不一样，所有都得加高亮）

ITPub博客

这是怎么回事？求大神解答

最新文章