css的响应变化

1.在这里是通过使用vue来实现的css的选择,通过绑定数据,并进行判断选择
2.使用

<template>
 <div>
   <p :class="{success:status == 'SUCCESS',fail:status == 'FAIL'}" >{{status}}</p>
 </div>
</template>
export default {
	name: "都可以",
     data(){
       return(){
       }
     },
     computed: {
     	status: "SUCCESS"
	     	//status: "FAIL"
     }
}
<style>
.success{
	color: blue
}
.fail{
	color: red
}
</style>

3.当status的值是SUCCESS时,结果是蓝色的SUCCESS;当status的值是FAIL时,结果红色的FAIL