v-bind (html 객체 속성에 바인딩)

1. 개인 공부를 목적으로 작성한 글입니다.
2. 아래 출처를 참고하여 작성하였습니다.

---

Intro

1. html 객체의 속성에 바인딩을 하려면 v-bind:를 사용합니다.

---

Example1. img 태그에 데이터 바인딩

<template>
    <div>
        <img v-bind:src="url" />
    </div>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            url: 'https://kr.vuejs.org/images/logo.png',
        };
    },
    setup() {},
    created() {},   
    mounted() {},   
    unmounted() {}, 
    methods: {}
}
</script>

---

Example2. button 태그에 데이터 바인딩

1. button 태그의 disabled 속성에 데이터 바인딩을 함으로써, 간단한 조건식으로 disabled 유무를 처리할 수 있습니다.

<template>
    <div>
        <input type="text" v-model="textValue" />
        <button type="button" v-bind:disabled="textValue===''">Click</button>
    </div>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            textValue: '',
        };
    },
    setup() {},
    created() {},   
    mounted() {},   
    unmounted() {}, 
    methods: {}
}
</script>

---

출처

1. Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)