[Vue.js 기본 문법] (데이터 바인딩) v-bind

(데이터 바인딩) v-bind

데이터 바인딩

1. 내용 데이터 바인딩

< script > data()에 데이터를 적어두고,

< template > 원하는 부분에 이중 대괄호로 불러오기!

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <h4>Hello world, this is {{name}}.</h4>

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      name: "sarah",
    };
  },
}
</script>

<style>
생략
</style>

2. 속성 데이터 바인딩

< script > data()에 속성 적어두고,

< template > 원하는 부분에 v-bind:style="" 로 불러오기!

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <p v-bind:style="fonts">font size</p>

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      fonts: "font-size:26px",
    };
  },
}
</script>

<style>
생략
</style>

3. 데이터를 js파일로 빼서 데이터 바인딩

• 데이터를 적어둔 파일을 import 한다. & 이름을 정해준다.

• < script > data()에 정한 이름을 불러온다.

• < template > 원하는 부분에 이중 대괄호로 불러온다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <p>{{Oneroom[0].title}}</p>
    <p>{{Oneroom[0].caption}}</p>

  </div>
</template>

<script>
import Oneroom from './assets/rooms_post.js';

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      Oneroom: Oneroom,
    };
  },
}
</script>

<style>
생략
</style>

rooms_posts.js

export default [{
      id: 0,
      title: "Sinrim station 30 meters away",
      image: "https://p.rmjo.in/moodShot/qqnt2gl5-1024x512.jpg",
      caption: "18년 신축공사한 남향 원룸, 공기청정기 제공 ☀️",
      price: 340000
    },
    {
      id: 1,
      title: "Changdong Aurora Bedroom(Queen-size)",
      image: "https://p.rmjo.in/moodShot/p85wsl40-1024x512.jpg",
      caption: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
      price: 450000
    },
    {
      id: 2,
      title: "Geumsan Apartment Flat",
      image: "https://p.rmjo.in/moodShot/h51acr02-1024x512.jpg",
      caption: "금산오거리 역세권 아파트입니다. 애완동물 불가능 🐶",
      price: 780000
    },
    {
      id: 3,
      title: "Double styled beds Studio Apt",
      image: "https://p.rmjo.in/moodShot/c3ii5yl7-1024x512.jpg",
      caption: "천호동인근 2인용 원룸입니다. 전세 전환가능",
      price: 550000
    },
    {
      id: 4,
      title: "MyeongIl Apartment flat",
      image: "https://p.rmjo.in/moodShot/6ouap4qn-1024x512.jpg",
      caption: "명일동 아파트 월세, 남향, 역 5분거리",
      price: 680000
    },
    {
      id: 5,
      title: "Banziha One Room",
      image: "https://p.rmjo.in/moodShot/ugt8rk70-512x256.jpg",
      caption: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
      price: 370000
    }];