Vue Data-Binding 이해하기 (1)

v-html

v-html 미사용

html 코드를 직접 반영할 때 사용됨

<template>
  <div>{{htmlString}}</div>
</template>

data() {
    return {
      htmlString: '<p style="color:red;">This is red string</p>'
    };
  }

출력결과 : 
<p style="color:red;">This is red string</p> //문자열로 인식함

v-html 사용

<template>
  <div v-html="htmlString"></div>
</template>

data() {
    return {
      htmlString: '<p style="color:red;">This is red string</p>'
    };
  }

출력결과 :

This is red string

v-model

input, textarea 등 value 속성을 가지는 것들에 대해 v-model을 사용하여 바인딩이 가능함

input문

<template>
<div>
  <input type="text" v-model="valueModel" />
</div>
</template>

data() {
    return {
      valueModel: 'South Korea'
    };
  }

출력결과 :
value값에 South Korea가 삽입됨

<template>
<div>
  <input type="number" v-model.number="valueModel2" /> //type이 text가 아니라 number일 경우, v-model.number로 바인딩해야함
</div>
</template>

data() {
    return {
      valueModel2: 12
    };
  }

출력결과 :
value값에 12가 삽입됨

select문

<template>
<div>
  <select v-model="city">
    <option value="02">서울</option>
    <option value="21">부산</option>
    <option value="064">제주</option>
  </select>
</div>
</template>

data() {
    return {
      city: "21" //city에서 21이라는 속성을 가진 부산에 초점
    };
  }

v-bind

속성값 연결에 사용

<template>
<div>
  <input type="text" value="인풋" />
  <button type="button" v-bind:disabled="textValue==''">click</button>
</div>
</template>

Class 연결에 사용

<template>
<div v-bind:class="{'active':isActive, 'text-red':isRed}">Class Binding</div>
</template>

data() {
    return {
      isActive: true,
      isRed: true
    };
}
  
<style scoped>
  .active {
    font-weight: bold;
  }
  .text-red {
    color: red;
  }
</style>

Class 연결하는 다른방법

<template>
<div v-bind:class="{activeClass, redClass}">Class Binding</div>
</template>

data() {
    return {
      activeClass: active,
      redClass: text-red
    };
}

Style 연결에 사용

<template>
<div v-bind:style="{styleState}">Style Binding</div>
</template>

data() {
    return {
      styleState: {
        backgroundColor: 'yellow',
        color: 'blue',
        fontWeight: 'bold'
      }
    };

style을 2개이상으로 나누어서 연결

<template>
<div v-bind:style="[styleObject, addStyle]">Style Binding</div>
</template>

data() {
    return {
      styleObject: {
        backgroundColor: 'yellow',
        fontWeight: 'bold'
      },
      addStyle: {
        color: 'blue',
      }
    };