Vue动态绑定style

目录

绑定对象

绑定数组

---

style和动态style可以一起使用

绑定对象

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

案例

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

 
<script setup lang="ts">
import { ref } from 'vue'
 
const styleObj = ref({
  height: '300px',
  background: 'pink'
})
script>

绑定数组

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

 
<script setup lang="ts">
import { ref } from 'vue'
 
const styleObj = ref({
  height: '300px',
  
})
const styleObj1 = ref({
  background: 'pink'
})
script>