014.Vue3入門，style屬性的幾種繫結方法

像一棵海草海草海草發表於2024-08-10
Vue

1、程式碼如下：

<template>
  <div :style="{color:activeColor,fontSize:fontsize+'px'}">Style繫結1</div>
  <div :style="styleObject">Style繫結2</div>
  <div :style="[styleObject]">Style繫結3</div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: "green",
      fontsize: '30',
      styleObject: {
        color: 'red',
        fontSize: '20px',
      }
    }
  }
}
</script>

<style>
</style>

2、效果如下：

相關文章