Vue의 클래스 및 스타일 설정 관련 방법

클래스&스타일 스타일 설정

class

html code

<p id="box">
    <strong>阿斯顿发</strong>
</p>

css code

.red {
    color: red;
}
.gray {
    background-color: gray;
}

js code

window.onload = function() {
    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray'
        }
    });
}

작성방법 스타일을 적용하려면

1. :class="[red, grey]"가 vue 매개변수의 데이터 속성을 호출합니다

   <strong :class="[red, gray]"></strong>

   로그인 후 복사

2. :class= "{red : true, grey: true}"

   <strong :class="{red: true, gray: true}"></strong>

   로그인 후 복사

   두 번째 방법은 vue 매개변수의 data 속성을 호출할 수도 있습니다. Vue의 모든 것은 데이터

   new Vue({
       el: '#box',
       data: {
          red: 'red',
          gray: 'gray',
          a: true,
          b: false
    }   
   });

   로그인 후 복사
   rrree
3. :class="json", 두 번째 방법의 단순화된 버전, 공식 버전

   <strong :class="{red: a, gray: b}"></strong>

   로그인 후 복사

new Vue({
    el: '#box',
    data: {
        red: 'red',
        gray: 'gray',
        json: {
            a: true,
            b: false
        }
    }
});

로그인 후 복사

은 기본적으로 class와 동일합니다.

1. :style="{}"

아아앙

1. :style="a"

   <strong :class="json"></strong>

   로그인 후 복사
   rrree
2. :style="[a, b]", a, b는 데이터의 두 json 데이터에 해당합니다