vue中:style的用法

Vue的style用法可以通过以下几种方式：

1. 对象语法：

<template>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
</template>

<script>
export default {
data() {
return {
textColor: 'red',
fontSize: 16
}
}
}
</script>

2. 数组语法：

<template>
<div :style="[styleObj1, styleObj2]"></div>
</template>

<script>
export default {
data() {
return {
styleObj1: {
color: 'red',
fontSize: '16px'
},
styleObj2: {
backgroundColor: 'blue'
}
}
}
}
</script>

3. 直接绑定一个样式对象：

<template>
<div :style="styleObj"></div>
</template>

<script>
export default {
data() {
return {
styleObj: {
color: 'red',
fontSize: '16px',
backgroundColor: 'blue'
}
}
}
}
</script>

希望这些能够解决你的问题！