Dynamic Css

데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 일반적으로 사용됩니다. 이 두 속성은 v-bind를 사용하여 처리할 수 있습니다. 우리는 표현식으로 최종 문자열을 계산하면 됩니다. 그러나 문자열 연결에 간섭하는 것은 짜증나는 일이며 오류가 발생하기 쉽습니다. 이러한 이유로, Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공합니다. 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다.

객체 구문

클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있다.

<div id="vue-app">
    <h1>Dynamic CSS</h1>
    <h2>Example 1</h2>
    <div v-bind:class="{red:true}"></div>
    <h2>Example 2</h2>
  </div>

image.png

index.html

<div id="vue-app">
    <h1>Dynamic CSS</h1>
    <h2>Example 1</h2>
    <div v-on:click="available = !available" v-bind:class="{available: available}">
      <span>Hello</span>
    </div>
    <h2>Example 2</h2>
  </div>

style.css

span {
    background: blueviolet;
    display: inline-block;
    padding: 10px;
    color: #fff;
    margin: 10px 0;
}

.available span {
    background: orange;
}

app.js

new Vue({
  el: "#vue-app",
  data: {
    available: true,
    nearby: false
  },
  methods: {

  }
});

image.png

image.png

Toggle 이벤트를 쉽게 구현할 수 있다.

배열 구문

v-bind:style에 대한 배열 구문은 같은 스타일의 엘리먼트에 여러 개의 스타일 객체를 사용할 수 있게 합니다.

<div v-bind:style="[baseStyles, overridingStyles]"></div>

자동 접두사

v-bind:style 에 브라우저 벤더 접두어가 필요한 CSS 속성 (예: transform)을 사용하면 Vue는 자동으로 해당 접두어를 감지하여 스타일을 적용합니다

Conditionals

Vue에서는 v-if 디렉티브를 사용하여 조건부 렌더링을 할 수 있다.

v-if

index.html

<div id="vue-app">
    <h1>Conditionals</h1>
    <button v-on:click="error = !error">Toggle Error</button>
    <button v-on:click="success = !error">Toggle Success</button>
    <p v-if="error">There has been an error</p>
  </div>

app.js

new Vue({
  el: "#vue-app",
  data: {
    available: false,
    nearby: false,
    error: false,
    success: false
  },
  methods: {

  },
});

image.png

Toggle Error 클릭 시 error가 true로 바뀌고 There has been an error가 나타난다.
v-else와 함께 else 블록을 추가하는 것도 가능하다.

index.html

<div id="vue-app">
    <h1>Conditionals</h1>
    <button v-on:click="error = !error">Toggle Error</button>
    <button v-on:click="success = !success">Toggle Success</button>
    <p v-if="error">There has been an error!</p>
    <p v-else-if="success">Whooo, success!</p>
  </div>

v-else를 사용해 error이면 success가 사라지고 success이면 error가 사라지는 효과를 구현했다.

v-show

엘리먼트를 조건부로 표시하기 위한 또 다른 옵션은 v-show 디렉티브입니다. v-if와 사용법은 거의 동일합니다.
차이점은 v-show가 있는 엘리먼트는 항상 렌더링 되고 DOM에 남아있다는 점입니다. v-show는 단순히 엘리먼트에 display CSS 속성을 토글합니다.

<p v-show="error">v-show error</p>

display: none 속성을 토글하는 효과이다.