Vue动态绑定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>