티스토리 뷰

개발 노트

[vue.js] v-bind:, :로 html 속성값에 데이터 바인딩하기

2020. 3. 10. 17:45
728x90

 

html 태그의 특정 속성 값(attribute)과 데이터를 연동하는 방법을 배워 봅니다.

 

 

Attribute Binding - Intro to Vue.js | Vue Mastery

In this lesson, we’ll explore ways you can connect data to the attributes of your HTML elements.

www.vuemastery.com

예제를 완성하려면 style.css 파일과 이미지 파일이 필요한데 동영상 오른쪽에 Lesson Resources에서 가져올 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>App</title>
        <link rel="stylesheet" type="text/css" href="./style.css">
    </head>
    <body>
        <div class="nav-bar"></div>
        <div id="app">
            <div class="product">
                <div class="product-image">
                    <img v-bind:src="image" v-bind:alt="altText"/>
                </div>
            </div>
            <div class="product-info">
                <h1>{{ product }}</h1>
                <p>{{ description }}</p>    
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="main.js"></script>
    </body>
</html>
var app = new Vue({
    el: '#app',
    data: {
        product: 'Socks',
        description: 'A pair of warm, fuzzy socks',
        image:"./assets/vmSocks-green-onWhite.jpg",
        altText: "A pair of socks",
    }
})

v-bind 지시어로 특정 태그의 속성 값을 데이터의 값으로 매핑할 수 있습니다. 예제는 img 태그의 src 값에 이미지 경로 데이터 값을 매핑합니다.

 

v-bind 지시어는 생략 가능합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>App</title>
        <link rel="stylesheet" type="text/css" href="./style.css">
    </head>
    <body>
        <div class="nav-bar"></div>
        <div id="app">
            <div class="product">
                <div class="product-image">
                    <img :src="image" :alt="altText"/>
                </div>
            </div>
            <div class="product-info">
                <h1>{{ product }}</h1>
                <p>{{ description }}</p>    
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="main.js"></script>
    </body>
</html>
728x90
댓글