홈페이지 유튜브

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글자 이내로 작성된 경우만 다음 단계로 이동하는 버튼이 활성화 되는 것을 확인할 수 있다.

Previousv-htmlNextv-bind style

Last updated