Vue动态样式:class用法
<template>
<div>
<h1>动态样式</h1>
<span class="money" :class="{activity: value === 'A'}" @click="toA">10元</span>
<span class="money" :class="{activity: value === 'B'}" @click="toB">50元</span>
<span class="money" :class="{activity: value === 'C'}" @click="toC">100元</span>
</div>
</template>
<script>
export default {
name: "Class",
data() {
return {
value: "", //变量
};
},
methods: {
toA() {
this.value = "A";
},
toB() {
this.value = "B";
},
toC() {
this.value = "C";
},
},
};
</script>
<style lang="scss" scoped>
.money {
font-size: 18px;
margin: 10px;
border: 1px solid #000000;
padding: 10px;
cursor: pointer;
&.activity{
background: pink;
color: #ffffff;
}
}
</style>