Vue动态绑定style

最新推荐文章于 2025-10-12 22:42:15 发布

原创最新推荐文章于 2025-10-12 22:42:15 发布 · 568 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #javascript

博客介绍了Vue中style的绑定方式，包括绑定对象和绑定数组。style和动态style可一起使用，绑定对象可通过特定语法或直接绑定样式对象，绑定数组则是将包含多个样式对象的数组绑定，这些对象会合并渲染到同一元素上。

绑定对象

绑定数组

style和动态style可以一起使用

绑定对象

:style="{ 样式名1: 值1, 样式名2: 值2, ... }"

案例

<template>
  <!-- 样式会合在一起,现在div的样式也就是 width: 500px;height: '300px';background: 'pink' -->
  <div style="width: 500px;" :style="{ height: '300px', background: 'pink' }"></div>
</template>

也可以直接绑定一个样式对象

<template>
  <!-- 样式会合在一起,现在div的样式也就是 width: 500px;height: '300px';background: 'pink' -->
  <div style="width: 500px;" :style="styleObj"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const styleObj = ref({
  height: '300px',
  background: 'pink'
})
</script>

绑定数组

可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上

<template>
  <!-- 样式会合在一起,现在div的样式也就是 width: 500px;height: '300px';background: 'pink' -->
  <div style="width: 500px;" :style="[styleObj, styleObj1]"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const styleObj = ref({
  height: '300px',
  
})
const styleObj1 = ref({
  background: 'pink'
})
</script>