2021-11-23 (Vue.js - 템플릿 문법(2))

v-bind를 사용해보자

1. v-bind

 - HTML 태그 속성 값을 데이터 바인딩 하고 싶을 때 사용

 - v-bind를 생략하여 :src, :href, :class 로 사용가능

 - v-bind 사용 방법

  (v-bind:태그속성="바인딩할데이터명")

  1. 이미지 데이터 연결 : v-bind:src

  2. 링크를 통한 연결 : v-bind:href

  3. 스타일시트 연결 : v-bind:class, v-bind:style

  4. 키를 통한 연결 : v-bind:key

<template>
  <div>
  <h1>Hello {{animal}}</h1>
  <h2>원숭이는 {{food}}를 좋아합니다</h2>
  <input type="text" v-model="food"/><br>
  <img v-bind:src="imageSource" alt="random"><br>
  <a :href="naverUrl">naver</a><br>
  <a :href="food">{{food}}</a>
  <hr/>
  <h2 v-bind:class="{ red: food ==='apple', 'not-good': food==='rice'}">원숭이는 {{food}}를 좋아합니다</h2>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return {
      animal : "Monkey",
      food : "바나나",
      imageSource: "https://placeimg.com/100/100/any",
      naverUrl: "https://www.naver.com"
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
input {
  font-size: 20px;
}
.orange {
  color: orange;
}
.salmon {
  color:salmon;
}
.red{
  color:red;
}
.not-good{
  text-decoration: line-through;
}
</style>

결과화면

1. 링크를 통한 연결(구글 주소 입력)

2. 스타일 시트를 통한 연결(apple 입력시 red, rice 입력시 line-through)

참고

https://www.youtube.com/watch?v=uThARZo8lKY&list=PLpJDjPqxGWGrkyxxavs2oW-SK3v_8VLwa&index=3 

https://kr.vuejs.org/v2/guide/syntax.html