[vue.js] vue 연습 (2) - 동적 style/class, vue 계산식

0. 들어가기

-. vue를 이용한 style 속성 지정.

-. 슬슬 복잡해진다..?

1. css style 지정방법

-. vue로 style 지정할 땐 style 구문이 조금 달라진다. 왜이런진 모르겠네... 복잡하게;

/* html */

<li 
v-for="item in items" 
:key="item.id" 
@mouseover="updateText(item.name)"
class="color-rectangle"
:style="{ backgroundColor: item.color }">  {{ item.name }}</li>

/* main.js */
items: [
    {id: 1, name: 'name#1', color: "red"},
    {id: 1, name: 'name#2', color: "blue"},
        ],

-. 위 예시와 같이, vue 구문으로 style 지정 시엔 v-bind:style="{ style 속성}" 이렇게 지정해야 한다. 이름도 css에선 background-color인데, backgroundColor 형태로 (camel 표기로) 변경된다. (그대로 "background-color" 구문을 쓰기 위해선 따옴표로 묶어줘야한다.)

-. style을 묶어서 지정할 수도 있다.

<li 
v-for="item in items" 
:key="item.id" 
@mouseover="updateText(item.name)"
class="color-rectangle"
:style="styleSet">  {{ item.name }}</li>

app = Vue.createApp({
    data: function() {
        return {
            product: "product from vue",
            image: "./assets/images/ryan.png",
            vKey: false,
            number: 11,
            items: [
                {id: 1, name: 'name#1', color: "red"},
                {id: 1, name: 'name#2', color: "blue"},
                    ],
            clicks: 0,
            showText: 'init text',
            styleSet: {
                color: 'red',
                fontSize: '20px',
                'font-weight': 'bold'
            }
        }
    },
    //함수정의
    methods: {
        addClicks() {
            this.clicks += 1;
        },
        updateText(targetText) {
            this.showText = targetText;
        }
    },

});

-. font-size → fontSize로 변경해서 써야 한다. 예시로, font-weight은 따옴표 추가해서 'font-weight'를 사용해봤다.

2. 동적 class 지정

-. vue 조건식을 이용해서 tag에 유동적으로 class 지정을 할 수 있다. 

<button 
class="button"  (기본 지정 class) 
:class="{ 'disabled-button': !calculation }"  (조건부 class)
v-on:click="addClicks">button</button> clicks = ( {{clicks}} )

/* style.css */
.color-rectangle {
    width: 100px;
    height: 50px;
    margin-top: 8px;
    border: 2px solid #000000;
}

.disabled-button {
    background-color: gray;
    cursor: not-allowed;
}

.button {
    background-color: white;
}

 

-. 삼항 연산자로도 한 줄로 표기할 수도 있음.

<button 
:class="[ calculation ? 'button' : 'disabled-button']"
v-on:click="addClicks">button</button> clicks = ( {{clicks}} )

-. 예제 따라하다보니 버튼에 cursor: not-allowed 속성을 지정했는데, 이래도 버튼 클릭이 되더라.... 코드를 살짝 수정. disabled 속성 지정으로 변경.

<div>
    <button 
    :disabled="!calculation"
    v-on:click="addClicks">button</button> clicks = ( {{clicks}} )
</div>

3. Computed properties

-. vue에서 계산식 등의 호출은 computed 섹션에 작성하면 된다.

-. 0에서 시작해서 클릭할 때 마다 1씩 커지고, 10이되면 버튼을 누를 수 없게되는 예제

/* index.html */
<div>
    <button 
    :disabled="!calculation"
    v-on:click="addClicks">button</button> clicks = ( {{clicks}} )
    remain: {{ remained }}
</div>

/* main.js */
app = Vue.createApp({
    data() {
        return {
            product: "product from vue",
            image: "./assets/images/ryan.png",
            vKey: false,
            number: 11,
            items: [
                {id: 1, name: 'name#1', color: "red"},
                {id: 1, name: 'name#2', color: "blue"},
                    ],
            clicks: 0,
            showText: 'init text',
            styleSet: {
                color: 'red',
                fontSize: '20px',
                'font-weight': 'bold'
            },
            calculation: true,
            
        }
    },
    //함수정의
    methods: {
        addClicks() {
            this.clicks += 1;
        },

    },
    computed: {
        remained() {

            this.calculation = (this.clicks < 10);
        }
    },

-. 출력 결과