Muscardinus
v-bind 본문
728x90
html의 특정 속성에 동적으로 데이터를 넣고 싶을 때가 있을 것이다, 이런 경우 우리는 v-bind를 사용하여 해당 속성에 원하는 데이터를 넣을 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>VueJS Course</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="app" v-cloak>
<p>{{ fullName() }}</p>
<p><a v-bind:href="url" target="_blank">Google</a></p>
<hr />
<label>First Name</label>
<input type="text" v-model="firstName" />
<label>Last Name</label>
<input type="text" v-model="lastName" />
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>const vm = Vue.createApp({
data() {
return {
firstName: 'John',
lastName: 'Doe',
url: 'https://google.com',
};
},
methods: {
fullName() {
return `${this.firstName} ${this.lastName.toUpperCase()}`;
},
},
}).mount('#app');
또한, 편의를 위해서 v-bind를 생략해도 된다.
<p><a :href="url" target="_blank">Google</a></p>728x90
'FrontEnd/Vue' Related Articles
more
Comments