[Vue.js] - Vue 속성(Attribute) 데이터 바인딩 하는 방법

#Img 객체의 src 데이터 바인딩 하는 방법

-`v-bind:src` 디렉티브를 사용하여 Vue에서 `src` 속성을 동적으로 바인딩할 수 있습니다. 

이 방법을 사용하면 Vue 데이터를 사용하여 `src` 속성을 동적으로 변경할 수 있습니다.

 

-Vue.js 코드

<template>
    <div>
        <img v-bind:src="imgSrc" />
    </div>
</template>

<script>
    export default {
        data() {
            return {
                imgSrc: "https://kr.vuejs.org/images/logo.png"
            };
        }
    }
</script>

 

-Vue src 데이터 바인딩 테스트

 

 

#Button 객체의 disabled 속성 데이터 바인딩 하는 방법

-Vue에서 `v-bind:disabled` 디렉티브를 사용하여 버튼의 `disabled` 속성을 동적으로 바인딩할 수 있습니다. 

이 방법을 사용하면 Vue 데이터를 기반으로 버튼의 활성화 또는 비활성화 상태를 동적으로 제어할 수 있습니다.

 

-Vue.js 코드

입력창에 데이터가 입력되는 순간 버튼이 활성화가 됩니다.

입력창이 비어 있는 경우에 버튼이 비활성화되어 있게 됩니다.

<template>
    <div>
        <input type="text" v-model="textValue">
        <button type="button" v-bind:disabled="textValue == ''">Click</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                textValue: ""
            };
        }
    }
</script>

 

-Vue Button 객체의 disabled 속성 데이터 바인딩 테스트