π νκ³ μΆμ κ²
κ΅λ΄ νκΈ°λ§ μΌνλͺ° ꡬν κ³Όμ μ§ν λμ€ μ₯λ°κ΅¬λ κΈ°λ₯μμ μνμ μνμ λ°λΌ
ꡬ맀 κ°λ₯ μ 무λ₯Ό μ¬μ©μμκ² λ³΄μ¬μ£Όλλ‘ νμ΅λλ€.
κ·Έλ°λ° λ°λ°ν ν
μ€νΈλ μλ―Έμλ μ 보λ₯Ό μ λ¬νκΈ° μ’μ§ λͺ»νλ€ μκ°ν΄ μνλ³λ‘ μ€νμΌμ μ μ©νλ κ²μ κ³ λ €νλλ°
Vue.js μμλ λμ ν΄λμ€ λ° μ€νμΌ λ°μΈλ©
μ μ§μν΄μ£Όκ³ μμ΄μ μ΄λ₯Ό μ μ©ν΄λ΄€μ΅λλ€.
π ν΄λμ€μ μ€νμΌ λμ λ°μΈλ©
Vue.js μμλ λ°μ΄ν°λ₯Ό λμ μΌλ‘ λλλ§νκΈ° μν΄ v-bind
λ₯Ό μ§μνκ³ μμ΅λλ€.
λ°λΌμ νΉμ μ»΄ν¬λνΈμ μ€νμΌ νΉμ ν΄λμ€λ₯Ό λμ μΌλ‘ ν λΉν΄μ£ΌκΈ° μν΄μλ ν΄λΉ κΈ°λ₯μ νμ©νλ©΄ λ©λλ€.
ν¬κ² κ°μ²΄λ₯Ό ν΅ν΄ μ§μ νλ λ°©λ²κ³Ό λ°°μ΄μ ν΅ν΄ μ§μ νλ λ°©λ²μΌλ‘ λλκ² λλλ°
ν΄λμλ₯Ό λμ μΌλ‘ ν λΉνκΈ° μν μν μ½λλ₯Ό μ΄ν΄λ³΄κ³ μ΄λ² νλ‘μ νΈμ μ μ©ν΄λ³΄λλ‘ νκ² μ΅λλ€.
(μ€νμΌ λλλ§μ μ€μ νλ‘μ νΈ μ μ© κ³Όμ μμ μ¬μ©νλλ‘ νκ² μ΅λλ€.)
λ κ°μ§λ μν©μ λ°λΌ λ³ΈμΈμκ² νΈλ¦¬ν λ°©λ²μ μ νν΄μ νμ©νλ©΄ λ©λλ€.
1οΈβ£ κ°μ²΄ ꡬ문
κ°μ²΄ ꡬ문μμλ v-bind
κ°μ ν΄λμ€λ€μ Object
ννλ‘ μ μν΄μ£Όλ©΄ λ©λλ€. λ€μκ³Ό κ°μ μ½λλ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€.
<div class="static" v-bind:class="{ active: isActive, error: hasError }"></div>
μ΄ κ²½μ° isActive
κ°μ΄ true
μΌ λλ§ active
λΌλ ν΄λμ€κ° λ°μλ©λ©λλ€. (error
λ λ§μ°¬κ°μ§)
λ°λΌμ λ κ°μ΄ λͺ¨λ true
μΌλ μ΅μ’
λλλ§ λλ μ»΄ν¬λνΈλ λ€μκ³Ό κ°μ΅λλ€.
<div class="static active error"></div>
μ΄λ staticμ λ°μΈλ© λμ΄ μμ§ μμ μ μ μΈ ν΄λμ€μ΄λ―λ‘ isActiveμ μ 무μ κ΄κ³μμ΄ μΆκ°λ©λλ€.
2οΈβ£ λ°°μ΄ κ΅¬λ¬Έ
λ°°μ΄ κ΅¬λ¬Έμ μ¬λ¬κ°μ ν΄λμ€ νΉμ μ€νμΌμ λ°°μ΄ ννλ‘ μ μνμ¬ λνλ΄λ κ²μ
λλ€.
νκ°μ§ μ°¨μ΄μ μ λμ μΌλ‘ λλλ§νκ³ μΆλ€λ©΄ μΌν μ°μ°μ νΉμ κ°μ²΄ ꡬ문
μ κ°μ΄ νμ©ν΄μΌ νλ€λ μ μ
λλ€.
μ‘°κ±΄μ΄ μλ ν΄λμ€ λμ΄μ λ€μκ³Ό κ°μ΅λλ€.
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
λ§μ½ μ‘°κ±΄λΆ λλλ§μ΄ νμνλ€λ©΄ λ€μκ³Ό κ°μ΄ λ΄λΆμ μΌν μ°μ°μ
λ₯Ό μ¬μ©νκ±°λ κ°μ²΄ ꡬ문
μ κ°μ΄ μ¬μ©νλ©΄ λ©λλ€.
μΌν μ°μ°μ
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
λ΄λΆμ κ°μ²΄ ꡬ문 νμ©
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
π νλ‘μ νΈμ μ μ©νκΈ°
νμ¬ κ° μνμ λν μ 보λ λ³λμ μ»΄ν¬λνΈλ‘ λλλ§ν΄μ£Όκ³ μλ μν©μ
λλ€.
κ°κ°μ μΉ΄λλ λΆλͺ¨ μ»΄ν¬λνΈλ‘λΆν° props
λ‘ μνμ λν μ 보λ₯Ό μ λ¬λ°κ³ μμΌλ―λ‘
μ΄μ€ νμ¬ μνμ ν맀 μ 무λ₯Ό λνλ΄λ status
κ°μ νμ©ν΄ λμ μΌλ‘ λλλ§ν΄μ£Όλλ‘ νκ² μ΅λλ€.
μ΄λ²μλ ν΄λμ€ λ°μΈλ©
μ΄ μλ μ€νμΌ λ°μΈλ©
μ μ μ©ν΄λ³΄λλ‘ νκ² μ΅λλ€.
μ€νμΌ λ°μΈλ©μ κ²½μ° μ μ©νκ³ μ νλ μ€νμΌμ Camel case
λ‘ μμ±ν΄μ Javascript κ°μ²΄ ννλ‘ μ λ¬ν΄μ€μΌν©λλ€.
μ€νμΌ κ°μ²΄ μ μΈ
νμ¬ μνμ΄ ν맀μ€μΌλλ μ΄λ‘μ, κ·Έλ μ§ μλ€λ©΄ λΆμμμ μ μ©νλλ‘ νκ² μ΅λλ€.
data() {
return {
onSale: {
color: 'darkseagreen',
},
soldOut: {
color: 'crimson',
},
}
},
ν νλ¦Ώ μ½λ
κΈ°μ‘΄μλ μμ§ μ€νμΌμ΄ μ μ© μλ λ¨μν span
νκ·Έμ
λλ€.
<span>{{ statusMessage }}</span>
μ΄μ μ μ½λλ₯Ό μλμ κ°μ΄ λ°κΏμ€λλ€.
<span :style="[status ? soldOut : onSale]">{{ statusMessage }}</span>
κ²°κ³Ό νλ©΄
π μ°Έκ³ μλ£
'π archive' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[Vue.js] v-model μμ±κ³Ό @Model λ°μ½λ μ΄ν°μ κ΄ν΄μ (0) | 2022.02.20 |
---|---|
[Vue.js] Vue μμ λΉλκΈ° μμ²μ μΈμ νλ κ²μ΄ μ’μκΉ? (0) | 2022.02.20 |
Vue.js μμ λ°μν(Reactivity)μ λ€λ£¨λ λ°©λ² (0) | 2021.03.02 |
Vue-router λ€λΉκ²μ΄μ κ°λ νμ©νκΈ° (0) | 2021.03.01 |
Vue.jsμ Vuetify νμ©ν΄μ axiosλ‘ νμΌ μ λ‘λνκΈ° (0) | 2021.03.01 |
π¬ λκΈ