一、第一种，：style写法，分为直接赋值变量，或者使用CSS样式对象
1.赋值变量
<button :style="buttonStyle">点击</button>
** computed: {
buttonStyle() {
return {
backgroundColor: this.clicked ? 'green' : 'blue',
color: 'white',
padding: '10px 20px'
};
}
}**
2.使用CSS样式对象
111
<script>
export default {
data() {
return {
bgColor: 'yellow',
textColor: 'blue'
};
}
};
</script>
二、第二种，使用类名绑定：class
**<template>
111
</template> <script> export default { data() { return { isActive: false, isLargeText: true }; } }; </script> <style> .highlight { background-color: yellow; } .large-text { font-size: 20px; } </style>**
本文转载自: https://blog.csdn.net/qq_42371932/article/details/134715234
版权归原作者 大嘴史努比 所有， 如有侵权，请联系我们删除。
版权归原作者 大嘴史努比 所有， 如有侵权，请联系我们删除。