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>

相关推荐

  1. vue3 +ts 动态 响应式数组

    2024-03-24 22:54:06       22 阅读
  2. Vue中Classstyle的方式

    2024-03-24 22:54:06       20 阅读
  3. Class 与 Style

    2024-03-24 22:54:06       39 阅读
  4. Vuevue动态样式

    2024-03-24 22:54:06       14 阅读
  5. vue中样式动态写法

    2024-03-24 22:54:06       30 阅读
  6. vue3组件数据双向

    2024-03-24 22:54:06       30 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-24 22:54:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-24 22:54:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-24 22:54:06       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-24 22:54:06       20 阅读

热门阅读

  1. Spring 主要模块有哪些?

    2024-03-24 22:54:06       19 阅读
  2. 【无标题】

    2024-03-24 22:54:06       15 阅读
  3. 5467: 【搜索】流浪奶牛

    2024-03-24 22:54:06       17 阅读
  4. Linux系统docker创建MySQL服务

    2024-03-24 22:54:06       19 阅读
  5. opencv瑕疵检测一般流程

    2024-03-24 22:54:06       15 阅读
  6. 话题——AI大模型学习

    2024-03-24 22:54:06       20 阅读
  7. VisionPro 9.0 64位下载地址

    2024-03-24 22:54:06       20 阅读
  8. vue3中defineProps详解

    2024-03-24 22:54:06       17 阅读
  9. vue3组合式api(一)

    2024-03-24 22:54:06       17 阅读
  10. Vue实现父组件向子组件传值

    2024-03-24 22:54:06       17 阅读
  11. mac如何安装homebrew

    2024-03-24 22:54:06       20 阅读