Vue3 기초 : html의 attribute binding

 

class 에 바인딩 했듯이 다른 태그들의 Attribute에도 뷰를 이용해서 바인딩을할 수 있다.

 

<template>
  <div>
    <h1 :style="{ color: 'red', fontSize: '60px' }">Hello Vue!</h1>
    <h1 id="title">Hello Title</h1>
    <h1 :id="dynamicId">Hello Title</h1>
    <a :href="url">naver</a>
    <img :src="image.src" :alt="image.alt" />
    <input :type="inputType" name="" id="" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      dynamicId: "content",
      url: "https://www.naver.com",
      image: {
        src: "https://placeimg.com/100/100/any",
        alt: "random image",
      },
      inputType: "color",
      pStyle: "color:red; font-size: 30px;",
    };
  },
};
</script>

<style>
#title {
  color: red;
  background-color: yellow;
}
#content {
  color: blue;
  background: pink;
}
</style>

 

 

위의 템플릿 부분에 적어둔

h1의 id 속성,

a태그의 href 속성,

img 태그의 src와 alt 속성

input 태그의 type 속성 등을 모두 v-bind: 를 이용해서

 

중간 부분의 스크립트에서 data함수에서 return해주는  값을 이용하여 채워 넣은 것을 확인 할 수 있다.