computed,switch,根据文字内容改变颜色/watch/props对象

  props:{
        currentPersonIsland:{
            typeof:'Object',
            default () {
                return {}
                }
        }
    },

watch: {
    //   这是深度监听，适合监听数组对象
      currentPersonIsland: {
          handler(val) {
              this.dealList(val)
          },
          deep: true
      },
    //   如果是个字符串，数字是值类型，普通监听就够了
    currentPersonIsland(newVal, oldVal) { // 可以监听 data里面的内容，也可以监听props 不能自己捏造一个
        // newVal 是变化后的新值 oldVal是旧值 这是自带的两个形参
        // 他的值变化后就会触发这里的方法
    }
  },

<div class="register">
              <span>订单状态</span>
              <p
                class="withdrawal_num"
                :class="colorStyle"
              >
                {{ filterStatus(item.earn_profit_type) }}
              </p>
            </div>

//js部分:
   computed:{
        colorStyle(){
            let name = ''
            switch(item.earn_profit_type){
                case:'10':
                name="green"
                break;
                case:'11||12':
                name="yellow"
                break;
                case:'':
                name="red"
                break;
             }
            return name
            }
    },            
filterStatus(val) {
      if (val == "10") {
        return "已购买";
      } else if (val == "11" || val == "12") {
        return "退卡中";
      } else {
        return "未购买";
      }
    }
//css部分
.green {
  color: #39b54a;
}
.yellow {
  color: #f29124;
}
.red {
  color: #e6432d;
}

computed,switch:根据后台接口返回的数据（this.weatherList[3].value)优良轻度污染重度污染等。显示不同的图片不同的文字。

 <p  >{{weatherGrade}}</p>


computed:{
    weatherGrade(){
      switch(this.weatherList[3].value){
          case '优' :
            this.picturePng=grade01;
            break;
          case '良' :
            this.picturePng=grade02;         
            break;
          case '轻度污染' :
            this.picturePng=grade03;
            break;
          case '中度污染' :
            this.picturePng=grade04;
            break;
          case '重度污染' :
            this.picturePng=grade05;
            break;
          case '严重' :
            this.picturePng=grade06;
            break;
            }
          return this.picturePng,this.weathList[3].value
}
  },