<template>
<div class="hello">
<button @click="addFn">提交</button>
<h1>{{msg}}</h1>
<p :class="[sum[index]]">颜色</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg:0,
sum:['red','blue','green','yellow','cyan'],
index:0
}
},
methods:{
addFn(){
if (this.msg==4){
return;
}else {
this.msg++;
this.index =this.msg;
}
}
}
}
</script>
<style scoped>
.red{
color:red;
}
.blue{
color:blue;
}
.green{
color:green;
}
.yellow{
color: yellow;
}
.cyan{
color:cyan;
}
</style>
vue中class渲染颜色 多种只取一种
最新推荐文章于 2023-03-27 17:33:02 发布