할머니의 콤퓨타 도전기

[Vue.js] 클래스와 스타일 바인딩 본문

카테고리 없음

[Vue.js] 클래스와 스타일 바인딩

ji.o.n.e 2020. 10. 28. 02:11
  • 클래스와 스타일 바인딩

  • 클래스 바인딩

    • 코드 구현 
      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study</title>
    <style>
        .skyblue{
            color: skyblue;
        }

        .font-bold{
            font-weight: bold;
        }

    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- class 이름에 dash(-)가 있는 경우 ''로 묶어줘야함 -->
        <div :class="{skyblue: isSkyBlue, 'font-bold': isBold}">hello</div>
        <button @click="update">click!</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isSkyBlue: false,
                isBold: false
            },
            methods: {
                update(){
                    this.isSkyBlue = !this.isSkyBlue;
                    this.isBold = !this.isBold;
                }
            },
        })
    </script>
</body>

</html>
    • 실행 화면

버튼 클릭 전
버튼 클릭 후

  • 스타일 바인딩
    • 구현 코드
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study</title>
    <style>
        .skyblue {
            color: skyblue;
        }

        .font-bold {
            font-weight: bold;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div :style="{color: blue, fontSize: size}">hello</div>
        <div :class="{skyblue: isSkyBlue, 'font-bold':isBold}">hello</div>
        <button @click="update">click!</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isSkyBlue: false,
                isBold: false,
                blue: 'blue',
                skyblue: 'skyblue',
                size: '30px'
            },
            methods: {
                update() {
                    this.isSkyBlue = !this.isSkyBlue;
                    this.isBold = !this.isBold;
                }
            },
        })
    </script>
</body>

</html>

 

  • 실행 화면

버튼 클릭 전
버튼 클릭 후

 

 

 

 

 

 

저작자표시
Comments