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>
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: {
}
});
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: {
},
});
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 속성을 토글하는 효과이다.
