[Vue.js] v-bind

v-bind는 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다.

v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙여준다.

<!DOCTYPE html>
<head>
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <p v-bind:id="idA">아이디 바인딩</p>
    <p v-bind:class="classA">클래스 바인딩</p>
    <p v-bind:style="styleA">스타일 바인딩</p>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        idA: 10,
        classA: 'container',
        styleA: 'color: blue'
      }
    })
  </script>
</body>
</html>

저작자표시 비영리 변경금지

'JavaScript > Vue' 카테고리의 다른 글

[Vue.js] Vue Directive (0)	2022.06.06
[Vue.js] Vue에서의 자바스크립트 표현식 (0)	2022.06.06
Named View (0)	2022.06.06
Nested Router (0)	2022.06.06
[Vue.js] router URL의 해시 값(#)을 없애는 법 (0)	2022.06.06

🐠붕어의 코딩 공부 기록🐠

[Vue.js] v-bind

'JavaScript > Vue' 카테고리의 다른 글

댓글

티스토리툴바

[Vue.js] v-bind

'JavaScript > Vue' 카테고리의 다른 글

관련글

댓글

티스토리툴바