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
}
},