본문 바로가기
프로그래밍/vue.js

vue.js - 5. v-bind, v-model 디렉티브

by -현's- 2021. 8. 1.
반응형

●v-bind 디렉티브

- v-bind는 html의 속성을 설정할 때 사용한다.

- 'v-bind:속성'에서 'v-bind'를 생략하고 ':속성'만 써도 된다.(v-bind:src -> :src)

 

ex)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="simpleDiv">
        <h3>{{text}}</h3>
        <input v-bind:value="text">
        <img v-bind:src="imgpath">
        <br>
        <input :value="text">
        <img :src="imgpath">
    </div>
    <script type="text/javascript">
        var model01 = { 
            text : '4번째 예제입니다1',
            imgpath : "https://s.pstatic.net/static/www/mobile/edit/2021/0716/mobile_144919923398.png"
        }; 

        var test = new Vue({ 
            el : '#simpleDiv', 
            data : model01
        })
    </script>
</body>
</html>

 

 

 

 

 

 

 

 

 

●v-model 디렉티브

- v-text, v-html등은 모두 단방향 디렉티브이다.

- v-model은 사용자가 입력한 값으로 모델의 값을 바인딩 해주는 양방향 디렉티브이다..

 

ex)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="simpleDiv">
        <h3>{{text}}</h3>
        <input type="text" v-model="text">
        <hr>
        <input type="checkbox" value="1" v-model="car">벤츠,
        <input type="checkbox" value="2" v-model="car">bmw,
        <input type="checkbox" value="3" v-model="car">아우디,
        <input type="checkbox" value="4" v-model="car">페라리,
        <input type="checkbox" value="5" v-model="car">람보르기니
        <br><br>
        선택한 자동차:<h v-html="car"></h>

    </div>
    <script type="text/javascript">
        var model01 = { 
            text : '5번째 예제입니다1',
            car : []
           }; 

        var test = new Vue({ 
            el : '#simpleDiv', 
            data : model01
        })
    </script>
</body>
</html>

 

 

 

 

 

반응형

댓글