Vuejs의 데이터 바인딩
3666 단어 webdevvuejavascripthtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- importing vue js dev library -->
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>My vue Test</title>
</head>
<body>
<div id="app">
What's your name?
<br>
<input type="text" name="name" v-bind:value="name">
<br>
<button v-on:click="changeName()">
change name
</button>
</div>
<script type="text/javascript">
var app = new Vue({ //instantiating the vue instance
el: '#app', //we select where vue is going to work in the DOM
data: {
name: 'Mattia'//this are the data
},
methods: {
changeName: function() {
this.name = "Martino";
}
}
})
</script>
</body>
</html>
이것은 결과 페이지입니다.
버튼을 클릭하면 필드에 값으로 표시된 이름이 즉시 변경됩니다.
Reference
이 문제에 관하여(Vuejs의 데이터 바인딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mattiatoselli/data-binding-in-vuejs-1hfe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)