> 웹 프론트엔드 > CSS 튜토리얼 > Vue의 클래스 및 스타일 설정 관련 방법

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

高洛峰
풀어 주다: 2017-02-18 14:50:06
원래의
1519명이 탐색했습니다.

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

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>
    로그인 후 복사
  4. new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray',
            json: {
                a: true,
                b: false
            }
        }
    });
    로그인 후 복사
style

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

  1. :style="{}"

  2. 아아앙
  1. :style="a"

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

vue의 더 많은 클래스 및 스타일 관련 설정 방법 및 관련 글은 PHP 중국어 홈페이지를 참고해주세요!

관련 라벨:
vue
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿