Vue根据条件改变组件样式后无法恢复到原样式

Question

整体逻辑如下，颜色从默认的第一种颜色变为第二种颜色的功能没问题可以实时变化，但颜色变回来需要手动F5刷新页面才会变回来

<div class="squareMan0"
//根据flagMan0判断组件是哪种颜色
           :style="{backgroundColor:this.flagMan0? 'rgba(10, 235, 130, 0.6)':'rgba(220,76,136,0.6)'}"></div>

export default {
  name: 'equipmentStatus',
  data() {
    return {
//默认flagMan0是ture显示第一种颜色
      flagMan0: true,

//这里是根据条件改变flagMan0的值为false来实现变成第二种颜色
 getAllInfo() {
      const url = 'http://localhost:9525/getDevice' //后端接口提供json
      this.$http.get(url).then(res => {
            const manLists = manList[0]
            for (var i = 0; i < 6; i++) {
              switch (manLists[i]) {
                case 0:
                  this.flagMan0 = false
                  break;

Answer 1

几个问题：
第一,html中一般不用this,直接写data中的值即可；
第二，这样写看起来更直观

<div class="squareMan0" :style="flagMan0 ? 'background: rgba(10, 235, 130, 0.6)':'background: rgba(220,76,136,0.6)'"></div>

第三，你这块代码写的应该有问题

const manLists = manList[0]
            for (var i = 0; i < 6; i++) {
              switch (manLists[i]) {
                case 0:
                  this.flagMan0 = false
                  break;

建议把for循环整块删除了
这样写html

<div class="squareMan0" :style="flagMan0 ? 'background: rgba(10, 235, 130, 0.6)':'background: rgba(220,76,136,0.6)'"></div>

//html

//js

data() {
  return {
     manLists: [] 
}
}
 getAllInfo() {
      const url = 'http://localhost:9525/getDevice' //后端接口提供json
      this.$http.get(url).then(res => {
            this.manLists = manList[0]//这里不清楚你要数组还是对象，是数组data中manLists就默认[],对象就{}