WEB/VUE.js
[Vue.js] input 데이터 바인딩
자바칩 프라푸치노
2021. 10. 12. 10:18
[데이터 바인딩 하는 법]
<전체 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뷰 기초 익히기</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ nextYear("안녕하세요") }}
<input v-bind:type="type" :value="inputData">
</div>
<script>
new Vue({
el: '#app',
data : {
person : {
name: 'lee',
age: 25
},
inputData : 'hello',
type : 'number'
},
methods : {
nextYear(greeting) {
return greeting + "!" + this.person.name + "은 내년에" + (this.person.age + 1) + "살 입니다."
},
otherMethod : function () {
this.nextYear()
}
}
})
</script>
</body>
</html>
데이터 바인딩을 하려면 태그의 속성 앞에 v-bind: 라고 쓰거나 간단하게 : 라고 쓰면 된다.
이것은 Vue 인스턴스의 data안에 값과 연결된다.
value에는 inputData에 있는 hello라는 값이 들어가고
type에는 type에 있는 number값이 들어간다.
728x90