[vue]템플릿문법 (v-bind, class)

v-bind

url을 변수로 바인딩 시켜주는 속성

  naver

export default {
  name: 'App',
  data: ()=>{
    return {
      animal:"Monkey",
      alertMessage:"<button>경고</button>",
      imageSource:"<<a href=https://placeimg.com/100/100/any>https://placeimg.com/100/100/any</a>>",
      naverUlr:"<<a href=https://naver.com>https://naver.com</a>>"
    };
  }
}

v-bind:을 쓰고 원래 태그의 속성인 src에 변수를 바인딩 시켜준다.

• v-bind를 생략하고 :콜론만 작성해도 무방하다

a태그의 href 속성에 변수를 대입하면 동적으로 href를 바인딩할 수 있다.

위의 예제에서는 naver주소를 바인딩 시켰다.

동적으로 class 부여하기

<style>
.orange{
  color:orange;
}
.salmon{
  color:salmon;
}
.red{
  color:red;
}
.not-good{
  text-decoration: line-through;
}
</style>
<template>
  <h1 v-bind:class="{orange:true,salmon:false,red:false,'not-good':true}">내가 제일 좋아하는 {{animal}}</h1>
</template>

<script>

export default {
  name: 'App',
  data: ()=>{
    return {
      animal:"Monkey",
      
    };
  }
}
</script>

v-bind를 사용해 클래스를 동적으로 걸 수 있다.

객체로 클래스이름과 true/false여부를 지정해 주면 된다.

true/false뿐 아니라 조건문을 지정해 주어도 된다.