여러개의 style 을 binding 하기

< 참고 자료>

 

v3.vuejs.org/guide/class-and-style.html#object-syntax-2

---

style 속성에 array 를 넣으므로써, class 를 흉내낼수있다.

<template>
  
  <div :style="[a, b, c, d]"></div>

</template>

<script lang="ts">

  export default {

    setup() {

      const a = { backgroundColor : 'red'}
      const b = { color : 'green'}
      const c = { width : '500px'}
      const d = { height : '500px'}

      return { a, b, c, d }

    }

  }

</script>

ES6 를 활용하면 아래와 같이 객체로도 가능하다.

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

</template>

<script lang="ts">

  export default {

    setup() {

      const a = { backgroundColor : 'red'}
      const b = { color : 'green'}
      const c = { width : '500px'}
      const d = { height : '500px'}
      
      const style = {...a, ...b, ...c, ...d} 

      return { style }

    }

  }

</script>