vue语法---样式操作-行内样式

直接写死的行内样式

<template><div v-bind:style="{color:'red'}">睡觉</div>
</template><script>export default{data() {return {}},methods:{}, mounted(){},}
</script><style lang="css"></style>

v-bind绑定对象(静态样式)

<template><div v-bind:style="{color:color1}">睡觉</div>
</template><script >export default{data() {return {color1:"red"}},methods:{}, mounted(){},}
</script><style lang="css"></style>

对象

<template><div v-bind:style="obj1"><!-- style的属性值是一个对象 -->睡觉</div>
</template><script >export default{data() {return {obj1:{color:'red', fontSize:'30px'}}},methods:{}, mounted(){},}
</script><style lang="css"></style>

数组

<template><div v-bind:style="[{color:'red'}, {fontSize:'30px'}]"><!-- // style的属性值是一个数组 -->睡觉</div>
</template><script >export default{data() {return {}},methods:{}, mounted(){},}
</script><style lang="css"></style>