v-bind:class使用的小技巧和坑

vue有一个动态绑定的小技巧。
假如我想实现：isactive值为1的时候，字体是红色。值为0的时候，字体是绿色

<template>
<div class='father' :class="{ change: isactive }">xxxxxx</div>
</template>

<script>
export default {
  data() {
    return {
      isactive: 1,
    };
  },
};
</script>

<style>
.father{
	color:red
}
.change{
	color:green
}
</style>

这样就可以了，首先把一个css定死，然后通过isactive来加入新的css，把老的给挤掉
浏览器里看大概就是这样

---

然后坑出在哪里呢，如果把css的位置变一下就不行了。

<template>
<div class='father' :class="{ change: isactive }">xxxxxx</div>
</template>

<script>
export default {
  data() {
    return {
      isactive: 1,
    };
  },
};
</script>

<style>
.change{
	color:green
}
.father{
	color:red
}
</style>

因为首先fatehr是一直加载进去的。change是后来动态绑定进去的，如果change写在了原来的上方，则会导致替代不掉原来的。css优先级的问题，if出现冲突下面的代码替代掉上面的代码。