v-bind
v-bind는 HTML에 동적 속성을 부여하기 위한 Vue의 기능이다. 동적 속성이란 상황에 따라 다르게 설정될 수 있는 형태를 의미하며, 태그내의 모든 속성에 사용이 가능하다.
만약, id를 동적으로 설정하고 싶다면 태그에 v-bind:id 속성을 추가하고 원하는 데이터를 설정하면 된다.
<태그 v-bind:id="데이터"></태그>줄여서 표현할 수 있도록 지원한다. 속성 이름 앞에 :만 사용하면 된다.
<태그 :id="데이터"></태그>사용 예제 - 비밀번호 힌트
<!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>Welcome to Vue JS 3</title>
</head>
<body>
<div id="app">
<h1>비밀번호 입력</h1>
<input v-bind:type="type" v-model="password">
<input type="checkbox" v-model="visible"> 비밀번호 표시
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
password:"",
visible:false,
};
},
computed:{
type(){
return this.visible ? "text" : "password";
},
}
});
app.mount("#app");
</script>
</body>
</html>비밀번호 표시하기를 체크하면 visible이 true가 되면서 비밀번호 입력창의 type이 text로 변하는 것을 확인할 수 있다.
사용 예제 - 다음 단계 버튼 활성화
<!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>Vue Directive Example</title>
</head>
<body>
<div id="app">
<h1>닉네임 입력</h1>
<p>닉네임은 한글 2~10자 이내로 작성하세요</p>
<input type="text" v-model="nickname" v-on:input="nickname = $event.target.value">
<br><br>
<button v-bind:disabled="invalidNickname">다음 단계로</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
nickname:"",
};
},
computed:{
invalidNickname(){
return !/[가-힣]{2,10}/.test(this.nickname);
},
}
});
app.mount("#app");
</script>
</body>
</html>닉네임이 한글 2글자에서 10글자 이내로 작성된 경우만 다음 단계로 이동하는 버튼이 활성화 되는 것을 확인할 수 있다.
Last updated