第一步 数组
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找到当前键的名字,然后通过第二歩和第三歩的对比,来添加高亮(有可能字段的值全不一样,所有都得加高亮)
比如这个卖出的网址效果 https://www.xin.com/c/compare...