Vue绑定内联样式：Style 绑定

onpine

于 2020-05-26 15:57:19 发布

阅读量2.9k

点赞数 1

分类专栏：前端笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43736435/article/details/106357667

版权

前端同时被 2 个专栏收录

30 篇文章

订阅专栏

笔记

23 篇文章

订阅专栏

本文详细介绍了Vue中v-bind:style的使用，包括对象语法和数组语法。对象语法允许直接绑定到样式对象或计算属性，而数组语法则支持同时应用多个样式对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对象语法：

v-bind:style 的对象语法和CSS语法很像，但他其实是一个 JavaScript 对象

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' ,line-height: '50px'}"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

也可以绑定一个返回对象的计算属性

<div v-bind:style="styleObject"></div>

data: {
    color: 'red',
    fontSize: '13px'
},
computed: {
  styleObject: function () {
    return {
      `color:$(this.color), fontSize:$(this.fontSize)`
    }
  }
}

数组语法：

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<!-- 数组里是两个样式对象 styleObject1, styleObject2 -->
<div v-bind:style="[styleObject1, styleObject2]"></div>

查看Vue官方绑定内联样式