Vue 여러가지 데이터 바인딩

 

문자열 데이터 바인딩

문자열은 '이중 중괄호'를 이용해서 데이터 바인딩 할 수 있다.

<template>
  <h1>Hello, {{title}}!</h1>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Word'
      };
    }
  }
</script>

 

 

raw(원시) HTML 데이터 바인딩

html 태그를 바인딩 할 때는 이중 중괄호 바인딩을 하면 안된다. html 태그가 아니라 문자열로 인식하게 되기 때문이다. html로 출력되게 하려면 v-html 디렉티브를 사용해야 한다.

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

<script>
  export default {
    data() {
      return {
        htmlString: '<p style="color:red;"> HTML String</p>'
      };
    }
  }
</script>

 

 

 

Form 입력 데이터 바인딩

• input type = text

input type=text의 경우 입력받은 텍스트는 value에 저장된다. v-model은 내부적으로 input type=text의 value 속성을 사용한다. data()에 정의한 데이터 키명을 v-model에 넣어주면, 양방향 데이터 바인딩 된다. 

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

<script>
  export default {
    data() {
      return {
        valueModel: 'South Korea'
      };
    }
  }
</script>

 

• input type = number

사용자의 입력값을 숫자로 바로 처리하려면 v-model.number 디렉티브를 사용하면 된다. (숫자로 관리됨)

<template>
    <div><input type="number" v-model.number="numberModel"/></div>
</template>

<script>
  export default {
    data() {
      return {
        numberModel: 3
      };
    }
  }
</script>

 

 

Textarea 데이터 바인딩

<textarea v-model="message"></textarea>로 사용해야 한다.

<template>
	<div>
    	<textarea v-model="message"></textarea>
  	</div>
</template>

<script>
  export default {
    data() {
      return {
        message: "textarea는 textarea v-model을 씁시다!"
      };
    }
  }
</script>

 

 

Select

select도 input type=text와 같이 v-model 내부적으로 value 속성을 사용해 양방향 데이터 바인딩 한다.

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

<script>
  export default {
    data() {
      return {
        city: "064"
      };
    }
  }
</script>

 

체크박스(input type=checkbox)

체크박스의 경우 v-model은 내부적으로 체크박스의 checked 속성을 사용한다. 때문에 value 속성에 데이터를 바인딩 하려면 v-bind:value를 사용해야 한다.

<template>
  <div>
    <label><input type="checkbox" v-model="checked" true-value="yes" false-value="no"> {{ checked }}</label>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  }
</script>

여러 개의 체크박스를 사용할 때는 배열을 이용하여 데이터를 바인딩할 수 있다.

<template>
  <div>
    <label><input type="checkbox" value="서울" v-model="checked">서울</label>
    <label><input type="checkbox" value="부산" v-model="checked">부산</label>
    <label><input type="checkbox" value="제주" v-model="checked">제주</label>
    <br>
    <span>체크한 지역: {{ checked }} </span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked:[]
      };
    }
  }
</script>

 

 

라디오(input type=radio)

라디오 역시 v-model은 checked 속성과 연결된다. value 속성에 데이터 바인딩을 원한다면 v-bind:value를 사용해야 한다.

<template>
  <div>
    <label><input type="radio" v-bind:value="radioValue1" v-model="picked">{{ radioValue1 }} </label>
    <label><input type="radio" v-bind:value="radioValue2" v-model="picked">{{ radioValue2 }}</label>
    <label><input type="radio" v-bind:value="radioValue3" v-model="picked">{{ radioValue3 }}</label>
    <br>
    <span>선택한 지역: {{ picked }}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        picked: '',
        radioValue1: '서울',
        radioValue2: '부산',
        radioValue3: '제주'
      };
    }
  }
</script>

 

 

 

속성(Attribute)

value를 제외한 html 객체의 속성에 데이터를 바인딩 할 때는 v-bind: 디렉티브를 사용한다. : (콜론)만 쓰는 것도 가능

 

 

Img 객체의 src

<template>
  <div>
    <img v-bind:src="imgSrc" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imgSrc: "https://file3.instiz.net/data/file3/2018/02/03/a/6/9/a69c368d8411fa522cdd4084742d5299.jpg"
      };
    }
  }
</script>

 

 

button 객체의 disabled

<template>
  <div>
    <input type="text" v-model="textValue"/>
    <button type="button" v-bind:disabled="textValue==''">Click</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        textValue: ""
      };
    }
  }
</script>

 

 

클래스 바인딩

반드시 적용해야 하는 클래스는 class 속성에 클래스명을 입력, 조건에 따라 바인딩하는 클래스인 경우 v-bind:class를 이용해서 추가적으로 정의해서 사용할 수 있다. 즉, 클래스의 경우 기본 클래스와 데이터 바인딩 처리를 하는 클래스를 공존해서 사용할 수 있는 것이다.

배열을 사용해서 클래스 바인딩을 할 수도 있지만(예: v-bind:class="[activeClass, errorClass]") 그 경우 조건에 따른 클래스 바인딩 처리를 ture/false로 할 수 없다.

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

<script>
  export default {
    data() {
      return {
        isActive: true,
        hasError: false
      };
    }
  }
</script>
<style scoped>
  container {
    width: 100%;
    height: 200px;
  }
  .active {
    background-color: yellow;
    font-weight: bold;
  }
  .text-red {
    color: red;
  }
</style>

• hasError: false;

• hasError: true;

 

 

 

인라인 스타일 바인딩

데이터를 오브젝트로 선언해서 바인딩 할 수 있다. 배열을 이용한 바인딩도 가능하다.

<template>
  <div v-bind:style="styleObject">인라인 스타일 바인딩</div>
</template>

<script>
  export default {
    data() {
      return {
        styleObject: {
          color: 'blue',
          fontSize: '40px'
        }
      };
    }
  }
</script>