«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Notice
Recent Posts
Recent Comments
Link
Tags more
Archives
Today
Total
관리 메뉴

여름 언덕에서 배운 것

[Vue3시작하기] v-bind 스타일 속성변경 본문

가랑비에 옷 젖는 줄 모른다 💻/Vue.js

[Vue3시작하기] v-bind 스타일 속성변경

잔뜩 2023. 10. 18. 22:30 

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
    .primary {
        color: coral;
    }
</style>

<div id="app">
    <h1>클래스 바인딩</h1>
    <div v-bind:class="textClass">데이터 바인딩 예제</div>

    <hr>
    <h1>아이디 바인딩</h1>
    <section v-bind:id="sectionId">
        반갑습니다.
    </section>

</div>

<script>
    Vue.createApp({
        data() {

            return {
                textClass: 'primary',
                sectionId: 'tab1'
            }
        },
        methods: {

        }
    }).mount('#app');
</script>

축약어 : 을 사용하자

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
    .primary {
        color: coral;
    }
</style>

<div id="app">
    <h1>클래스 바인딩</h1>
    <div :class="textClass">데이터 바인딩 예제</div>

    <hr>
    <h1>아이디 바인딩</h1>
    <section :id="sectionId">
        반갑습니다.
    </section>

</div>

<script>
    Vue.createApp({
        data() {

            return {
                textClass: 'primary',
                sectionId: 'tab1'
            }
        },
        methods: {

        }
    }).mount('#app');
</script>

style 도 가능!

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
    .primary {
        color: coral;
    }
</style>

<div id="app">
    <h1>클래스 바인딩</h1>
    <div :class="textClass">데이터 바인딩 예제</div>

    <hr>
    <h1>아이디 바인딩</h1>
    <section :id="sectionId" :style="sectionStyle">
        반갑습니다.
    </section>

</div>

<script>
    Vue.createApp({
        data() {

            return {
                textClass: 'primary',
                sectionId: 'tab1',
                sectionStyle: { color: 'red' }
            }
        },
        methods: {

        }
    }).mount('#app');
</script>
728x90

'가랑비에 옷 젖는 줄 모른다 💻 > Vue.js' 카테고리의 다른 글

Vue 프로젝트 포함하는 방법 2가지 (CDN , npm/yarn)  (0) 2023.10.19
[Vue3시작하기] Vue CLI,라이브러리, 파일 임포트 방식 설명  (0) 2023.10.18
[Vue3시작하기] v-if, v-show  (0) 2023.10.18
[Vue3시작하기] 같은 레벨의 컴포넌트간 데이터 전달 방법  (0) 2023.10.16
[Vue3시작하기] Event Emit 구현  (0) 2023.10.16
'가랑비에 옷 젖는 줄 모른다 💻/Vue.js' Related Articles more