vue 3 - class & style

😎 vue 3 - class & style

composition API를 기준으로 합니다

✅  클래스 바인딩

객체 바인딩

아래 코드 isActive의 Boolean값에 의해 active 클래스가 결정된다

<div :class="{ active: isActive }"></div>

const isActive = ref(true)

// 다음과 같이 랜더링 된다
<div class="active"></div>

computed

일반적으로는 가독성 및 재사용성을 위해 계산된 값을 반환하는 방식으로 사용한다

<div :class="classObject">classObject</div>

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-error': error.value
}))

component

컴포넌트에 class 속성을 사용하면 컴포넌트 루트 엘리먼트의 기존 클래스와 병합된다

<!-- 자식 컴포넌트의 템플릿 -->
<p class="foo bar">안녕!</p>

<!-- 컴포넌트가 사용될 때 -->
<MyComponent class="baz boo" />

<!-- 아래처럼 랜더링된다 -->
<p class="foo bar baz boo">안녕!</p>

컴포넌트 내부의 요소들에 class를 전달하고 싶을 경우 $attrs를 사용한다

// MyComponent
<div>
  <p :class="$attrs.class">안녕!</p>
  <span>반가워!</span>
</div>

// app
<MyComponent class="hello" />

// 아래처럼 랜더링된다
<div>
  <p class="hello">안녕!</p>
  <span>반가워!</span>
</div>

 

✅  스타일 바인딩

 

:style 디렉티브를 통해 인라인 스타일 바인딩이 가능하다

const styleObject = reactive({
  color: 'red',
  fontSize: '20px'
})

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

스크립트 단에서의 스타일링은 지양하되 스크롤 이벤트 등 동적인 값이 필요할 경우엔 사용하기도 한다

 

접두사 자동완성

해당 브라우저에서 지원되지 않는 CSS 속성이 :style에 사용되면,

자동으로 해당 속성과 **벤더 접두사**가 조합된 여러 개의 속성을 테스트하고 지원되는 속성을 찾아서 추가한다

// 스타일 속성에 다중 값을 배열로 추가할 수 있다
<div :style="{ display: ['flex', '-webkit-box', '-ms-flexbox', '-moz-flexbox'] }"></div>

이 경우, 브라우저가 지원하는 배열 내 마지막 값을 렌더링 한다

만약 브라우저가 flex와 -webkit-box 속성만 지원한다면,  flex라는 표준 속성 값이 있어도 display: -webkit-box를 렌더링 한다

불필요한 작업을 방지하기 위해서 작업할 브라우저에 맞는 벤더 접두사를 잘 추가하도록 하자

 

 

 

https://v3-docs.vuejs-korea.org/guide/essentials/class-and-style.html