17. Vue2 - @Input

OS	Windows 10 PRO 64bit 버전 20H2 (OS 빌드 19042.867)
Vue	2.5.13

 

v-model은 v-bind 와 v-on:input 으로 만들어졌다

단, input 태그들만 적용되는 점이 있는데

h1, h2, h3, div, p, span 태그도 적용하고 싶은 경우 아래와 같이 사용하면 된다

 

Enter 치면 div 태그가 삽입된다

 

<div>
  <h1> 홈페이지 </h1>
  <div>
    <h2 @input="updateInput" contenteditable="true"></h2>
  </div>
  <div>
    <p>{{ msg }}</p>
  </div>
</div>

<script>
export default {
  name: "HomePage",
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    updateInput(event) {
      const txt = event.target.innerHTML.replaceAll('&nbsp;', ' ')
      console.log(txt)
      this.msg = txt
    }
  }
}
</script>


<style>
h2 {
  outline: 0;
}
p {
  white-space: pre
}
</style>