클래스와 스타일 바인딩

v-bind가 class 및 style과 함께 사용될 때 특별한 향상을 제공
<div :class="{ active: isActive }"></div>

객체를 반환하는 계산된 속성에 바인딩할 수도 있습니다.

:class를 배열로 바인딩하여 클래스 목록을 적용할 수 있습니다:

<template>
  <h1
  	:class = "바인딩 할 스크립트 데이터"
    :style="[fontStyle, backgroundStyle]" //스타일 바인딩
    @click="ChangeStyle">
    hello?!
  </h1>  

</template>

<script>
export default{
  data() {
    return {
      fontStyle: {
        color: 'orange',
        fontSize: '30px'
      },
      backgroundStyle: {
        backgroundColor: 'black'
      }
    }
  },
  methods: {
    ChangeStyle() {
      this.fontStyle.color = 'red'
      this.fontStyle.fontSize = '40px'
    }
  }
}
</script>

조건부 렌더링

v-if

디렉티브는 조건부로 블록을 렌더링하는 데 사용됩니다.
블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링됩니다.

v-else

v-else 디렉티브를 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있습니다

v-else-if

v-else-if는 이름에서 알 수 있듯이 v-if에 대한 "else if 블록" 역할을 합니다. 여러 번 연결될 수도 있습니다:

<button @click="awesome = !awesome">전환</button>

<h1 v-if="awesome">Vue는 정말 멋지죠!</h1>
<h1 v-else-if = count > 3 > count 가 3보다 커요 </h1>
<h1 v-else>아닌가요? 😢</h1>

다만 v-if구현을 위해 div요소로 감싸기 보다는 <template>로 감싸서 사용하자
최상위 템플릿 에는 사용하면 안된다.

v-show

v-show는 v-if와 다르게 엘리먼트는 항상 렌더링되고 DOM에 남아 있다
v-show는 엘리먼트의 display CSS 속성만 전환.
v-show는 엘리먼트를 지원하지 않음, v-else와 상호작용하지 않습니다.

v-if vs v-show
일반적으로 v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높습니다. 따라서 매우 자주 전환해야 하는 경우 v-show를, 실행 중에 조건이 변경되지 않는 경우 v-if를 사용하는 것이 좋습니다.