1、对象形式
<template>
<div :style="{fontSize: `${fontSize}px`}">雨夹雪</div>
</template>
<script>
export default {
data(){
return{
fontSize: 15
}
},
}
</script>2、三元表达式
<div :style="{color:status == true ? 'red' : 'black'}">晴天</div>
<div :style="status == true ? 'color: red' : 'color:black'">雨天</div>3、数组形式文章来源：https://www.toymoban.com/news/detail-808462.html
<template>
<div :style="[styleObj,styleFontWeight]">下雪了</div>
<div :style="[styleObj,{fontWeight: fontWeight}]">雪停了</div>
<div :style="[styleObj,{style?'font-weight: 600': 'font-weight:normal'}]">起风了</div>
</template>
<script>
export default {
data(){
return{
style: true,
styleObj:{
color: 'red',
fontSize: '12px'
},
styleFontWeight:{
fontWeight: 'bold'
},
fontWeight: 600
}
},
}
</sctipt>4、调用方法文章来源地址https://www.toymoban.com/news/detail-808462.html
<template>
<div :style="getStyle()">龙卷风</div>
</template>
<script>
export default{
methods:{
getStyle(){
return {
color: '#333',
fontSize: '14px'
}
}
}
}
</script>到了这里，关于Vue 动态Style的几种写法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
