Vue.js DataBinding

데이터 바인딩

js의 변수를 template에 넣고 싶을 때는 {{}}를 사용하면 된다.

<template>
    <div>
        <h1>hello {{userName}}</h1>
        <p></p>
    </div>
</template>
...

이런 식으로 데이터를 자유자재로 왔다갔다 할 수 있어 document객체를 사용할 필요없이 간단하게 구성가능하다.

html data를 가지고 오려면 v-html=""를 사용한다.

<template>
    <div>{{htmlString}}</div>
    <div v-html="htmlString"></div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      htmlString: '<p style="color:red;">Red</p>'
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

결과

input의 경우 v-model