V-bind

class를 data로 넣어주고 싶을때 사용

 

v-bind: = :

 

v-bind를 축약해서 : (콜론) 만사용할수 있다

 

 v-bind:class = {클래스이름 : boolean값} 으로 참일때 클래스가 실행이 된다
 boolean 값은 data객체의 속성이 들어가도 되고 
 true/false로 값이 들어갈수 있다

 

기본 html 속성(ex) class) 앞에다 : 붙이면 data 나 js표현식을 사용할수있다

 

속성접근가능

 

이미지, 링크, 스타일 크기에 대한 단방향(data에서 html한쪽으로만사용가능) 데이터 바인딩

 

 

bind로 접근할수 있는값

이미지 img src : v-bind:src

링크 a href : v-bind:href 

클래스 : v-bind:class

 

스타일 : v-bind:style

 

키 : v-bind:key

 

v가 붙은 것들은 data를  가르킨다

 

객체 형식을 사용

 

:class = ""{class이름 : boolean}"

<style>
        .active { color: green; }
 </style>
 
<div id="app">

    <h1 :class = "{ active : isActive }" >class 바인드 확인</h1>
    <h1 :class = "{ active : true }" >class 바인드 확인</h1>
    
    <!-- 아래처럼사용할수없다 
    data에 active가 없기때문이다 active는 class이다 -->
    
    <h1 :class = "active" >class 바인드 확인</h1>
    <h1 :class = "{active}" >class 바인드 확인</h1>
    
    <script>
        new Vue ({
            el : "#app",
            data : {
                isActive : true,
        })
    </script>

class이름 : boolean값 이여서 

acive는 class값이여서 단독사용할수없다 다만 active : isActive로사용이가능하다

data안의 isActive :true여서 사용가능하다

 

<h1 :class = "{ active : isActive }" >class 바인드 확인</h1> 로

isActive가 data에 true로 되어있어서 

class값 active가 실행된다 isActive = flase라면 class값 active가 실행되지 않아 color가 green으로 바뀌지않는다

 

 

---

data객체값으로  class연결

v-bind:class="data속성명" 을 적어주게 되면 data안에 있는 값을 class에 등록

 

data"속성명+'class이름' "

 

<style>

     .active{color:mediumslateblue;}

     .active_red{color: mediumaquamarine;}
         

    </style>
</head>
    <div id="app">
         <!--
            v-bind:class="data속성명"을 적어주게 되면
            data안에 있는 값을 class에 등록
        -->
        <!-- data에서 ActiveClass : "active"를 찾아 클래스등록  -->
        <p v-bind:class="ActiveClass">data의 객체의 값으로 클래스 연결</p>
        
        <!-- ActiveClass의 값을 먼저 찾은 후 '_red' 문자열을 더해서 그 이름의 클래서등록 -->
        <p v-bind:class="ActiveClass+'_red'">data의 객체의 값으로 클래스 연결</p>
       
        <!-- ''를 이용하여 문자열을 바로 작성하면 그 이름의 클래스 등록 -->
        <p v-bind:class="'active'"> data의 객체의 값으로 클래스 연결</p>
    </div>

    <script>
        new Vue({
            el:'#app',
            data : {
                ActiveClass : "active"
                //data이름 : "class이름"
            }
        })
    </script>

 

---

배열을 이용하여 여러 클래스 연결

 

 

v-bind:class="[ ]" 배열사용

v-bind:class="[ { }, ]" 배열안 객체사용

 <style>

     .active{color:mediumslateblue}


     .active_bg { background-color: black; }
         

    </style>
</head>
    <div id="app">
         <!-- 배열을 작성해주면 data에 입력된 값을 들고와서 클래스 등록 -->
         <p v-bind:class="[ActiveClass, ActiveBGClass]">배열을 이용하여 여러개의 클래스 연결</p>

         <!-- 배열안에서 객체를 이용하여 등록할지 안할지 boolean 설정가능 -->
         <p v-bind:class="[{ active : isActive }, ActiveBGClass]">배열을 이용하여 여러개의 클래스 연결</p>
    </div>

    <script>
        new Vue({
            el:'#app',
            data : {
                isActive : true,
                ActiveClass : "active",
                ActiveBGClass : "active_bg",
            }
        })
    </script>

 

 

<p v-bind:class="[ActiveClass, ActiveBGClass]">

v-bind:class= "" 안에 배열도 들어갈수있다  

ActiveCalss를 들고와서  active class로 등록해줘서 color값이 변한다

ActiveBGClass를 들고와서 active_bg 로 등록해줘서 background-color값이 변한다

 

 

<p v-bind:class="[{ active : isActive }, ActiveBGClass]">

v-bind:class = "" 안에 배열안 객체도 넣을수있다

객체를 넣으면 boolean값인지 설정가능하다 

active는 class이고 isActive는 data에서 true가 되어있어서 active class가 랜더링(화면상표시)된다

만약false라면 렌더링되지않는다 color색이 변하지 않는다

ActiveBGClass를 들고와서 active_bg로 등록해줘서 background-color값이 변한다 

 

isActive : true

 

 

 

isActive : false

 

 

---

css지정하지 않고 data나 style바로 지정

 

v-bind:style="{스타일명 : 데이터 속성/ '스타일지정'}"

데이터속성은 ''(따옴표) 하지 않아도 되지만 스타일지정은 ''(따옴표) 해줘야한다

 

<div id="app">
    
        <!-- css이용하지 않고 data로만 style지정가능하다 -->
         <h1 :style="{color: activeColor}">style바인드</h1>
       
       <!-- css data둘다 사용하지 않고 style지정가능하다 -->
         <h1 :style="{color:'blue'}">style바인드</h1>
         
          <!-- data에 style지정가능 -->
         <h1 :style="onStyle">data에 style지정</h1>
         
     </div>
 
     <script>
         new Vue({
             el:'#app',
             data : {
                 activeColor : "blue",
                 onStyle: { color : "brown"}
             }
         })
     </script>

 

 

 

---

값 넣거나 배열의 형식으로 사용할때

    

 v-bind:style = "속성명"

<div id="app">
    <!-- 값을 넣거나 배열의 형식으로 넣을때 데이터 속성명으로 넣어 적용 -->
   
        <!-- 객체로이름으로 값넣어주기 -->
        <p v-bind:style="baseStyle">데이터에 미리작성해둔Style값 적용</p>
       
       <!-- 두가지 객체 들고오기 -->
        <p v-bind:style="[baseStyle,fontStyle]">데이터에 미리작성해둔Style값 적용</p>
        
    </div>

    <script>
        new Vue({
            el:'#app',
            data : {
                baseStyle : {//객체만듬
                    color : "green",
                    fontSize : "30px",
                    'background-color': "yellowGreen"//소문자쓰고싶을때''사용
                     //yellowgreen이라하며안되고 
                     //뒤의 단어의첫글자를 대문자로적어야됨       
                },

                fontStyle :{
                    'font-weight' : "bold"
            }
            }
        })
    </script>

baseStyle의 객체 안 color  fontSize bacground-color가 있어 다지정된다

background-color는 소문자여서''(따옴표)를 사용한다 kebab-case(첫글자소문자-다음글자첫글자소문자)

'backgroundColor'도가능하고 ''(따옴표) camelCase(첫글자소문자 다음첫글자대문자)

backgoundColor 도가능하다 ''(따옴표) (X)

 

yellowGreen은 G가 g가되면 지정되지않아서 대문자로 사용해야한다

 

fontStyle객체안 font-weight도 마찬가지로

'font-weight' 일때는 '' 붙여줘야되고

 font-Weight ,  'font-weight' 도 사용이 가능하다