style class 속성의 클래스명을 "data:"의 값으로 지정할 수 있습니다, 또한 특정 클래스를 붙일지 붙이지 않을지도 값으로 지정 할 수 있습니다.

class를 데이터로 지정

<p v-bind:class="프로퍼티명<<클래스>>"></p>

 

class를 복수로 지정

<p v-bind:class="[프로퍼티명<<클래스명>>, 프로퍼티명<<클래스명>>]" ></p>

class의 활성화를 데이터로 지정

<p v-bind:class="{'클래스명':프로퍼티명<< true/false >>}"><p>

 

<template>
 <div id="app">
  <p class="strike-througn">직접입력</p>
  <p v-bind:class="myClass"> v-bind 연결</p>
  <p v-bind:class="[myClass, darkClass]"></p>
  <p v-bind:class="{'srtike-through' : isOn}"> 데이터로  클래스 On/Off</p>
</template>


<script>
 new vue({
  el: '#app',
  date : {
   myClass : 'strike-througn',
   darkClass : 'dark',
   isON : true
  }
 })
</script>


<style scoped>
 .strike-through { text-decration:line-through; color:lightgray; }
 .dark { backgroud : gray; } 
</style>