vue3动态绑定style

最新推荐文章于 2024-08-23 15:35:36 发布

茶一蛊

最新推荐文章于 2024-08-23 15:35:36 发布

阅读量500

点赞数 1

分类专栏： Vue3 文章标签： javascript 前端开发语言 vue.js

本文链接：https://blog.csdn.net/qq_26905813/article/details/136941693

版权

Vue3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue3动态绑定style

:style=“{属性名：变量}”

在这里插入图片描述
变量的赋值可以根据自己的业务做出调整

直接引用对象 :style=“对象”

<template>
  <div :style="dynamicStyle"></div>
</template>

<script setup>
   const styleObject:{
         color:"red",
         fontSize:"30px"
   },
</script>

绑定一个含多个样式的数组 :style=“[styleA, styleB]”

<template>
  <div :style="[styleA, styleB]"></div>
</template>

<script setup>
   const styleA:{
         color:"red",
         fontSize:"30px"
   },
   const styleB:{
         color:"red",
         fontSize:"30px"
   },   
</script>