Vue 기초 템플릿 문법 [ v-bind, class ]

 

 

v-bind

 

img태그에 src =" " , a태그에 href=" " 에 동적으로 데이터를 바인딩할때 주로 사용하는 방법 입니다.

<template>

  <div>

    <img v-bind:src="imgSource" />       

// v-bind: 없이 그냥 사용하면 <img src="imgSource"/> 변수로인식이안됩니다.

    <a v-bind:href="naverUrl"> 네이버이동 </a>

//v-bind: 중 v-bind 빼고 : 만 붙여서 사용하여도 동일한 기능을 합니다. <a :href="naverUrl">

  </div>

</template>

 

<script>

  export default {

    name:"App",

    data() {

      return {

        imgSource : "https://placeing.com/200/200/any",

        naverUrl:"http://www.naver.com"

       };

     }

</script>

class

v-bind 와함께사용하여 class 를 동적으로 사용하는 방법입니다.

보통은 class 를 지정해줄때 <h2 class="red" /> 이런식으로 사용하지만

동적으로 class를 변경해주고 싶을경우,  <태그 v-bind:class="{  클래스명 : 조건식 (참/거짓) }"  />

 

<template>

<h3 v-bind:class="{  red  :  food ==="banana"  }"  >원숭이는 {{food}} 를 좋아합니다 </h3>

         // 조건식에 food 가 banana 가 맞다면 class 는 red 가되어  text 전체가 red 컬러로 변할것입니다.

</template>

 

<script>

export default {

    name:"App",

    data() {

      return {

        food:"banana",   

//food 의 값을 "apple" 로 변경하면  조건식이 거짓이 되어서 class적용이 되지않아 text 컬러가 black 으로 나옵니다.

      };

   }

</script>

 

<style>

.red {

 color:red;

}

.not-good{

 text-decoration : line-through;

}

</style>

 

 

 *  무료 강의나 인강을 통해 배운 내용을 개인적인 복습과 자료로남기기위해  작성한 글입니다. *