v-bind 기본 사용법

v-bind:class 사용법

1. 볼치 채택 여부 판단

 
　data:{
    　　isColor:true,
    　　isSize:true
　　}

2. 객체 속성 - 부울 값으로 적용 여부 판단

  
data:{
    classObject:{
    'textColor': true,
    'textSize': true
    }

4.isA?classa:"3원 표현식

 
    data:{
        classA: 'textColor',
        classB: 'textSize',
        isA: false
    }

3. 배열 형식

   
    data:{
        classA: 'textColor',
        classB: 'textSize'
    }

v-bind:스타일

1

 
data:{
            activeColor: 'red',
            size: '30px',
            shadow: '5px 2px 6px #000'
        }

2.

 

 data:{
        styleObject:{
        color: 'red',
        fontSize: '30px',
        textShadow: '5px 2px 6px #000'
        }

3.

  

 data:{
        styleA:{
            fontSize: '30px',
            color: 'red'
        },
        styleB:{
            textShadow: '5px 2px 6px #000'
        }
    }

4.

   
data:{
        styleA:{
            fontSize: '30px',
            color: 'red'
        },
        styleB:{
            textShadow: '5px 2px 6px #000'
        },
        isA: false
    }

v-bind:src

 ![](url)
 data:{
            url: "../img/pg.png"
        }

v-bind:title

ps:이 디스플레이 방식은 스스로 시험해 보자

    
 
    

    new Vue({
    el: "#app",
    data:{
        message:" "
    }
    })