ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端-VUE2中的动态CSS样式 [打印本页]

作者: 十念 时间: 2024-6-25 10:40
标题: 前端-VUE2中的动态CSS样式
一、第一种，：style写法，分为直接赋值变量，或者使用CSS样式对象

1.赋值变量

<button :style="buttonStyle">点击</button>
computed: {
buttonStyle() {
return {
backgroundColor: this.clicked ? 'green' : 'blue',
color: 'white',
padding: '10px 20px'
};
}
}
2.使用CSS样式对象

<div :style="{ backgroundColor: bgColor, color: textColor }">111</div>

<script>
export default {
data() {
return {
bgColor: 'yellow',
textColor: 'blue'
};
}
};
</script>

二、第二种，使用类名绑定：class

<template>
<div :class="{'highlight': isActive, 'large-text': isLargeText}">111</div>
</template>

<script>
export default {
data() {
return {
isActive: false,
isLargeText: true
};
}
};
</script>

<style>
.highlight {
background-color: yellow;
}

.large-text {
font-size: 20px;
}
</style>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)