v-on으로 이벤트 정보를 얻을 수 있는 ♦ Vue.js❏

3099 단어 Vue.js
이번에 마우스가 어디에 있으면 활성 정보를 얻어 X축과 Y축을 표시합니다.
개발 환경은 JSFiddle https://qiita.com/ITmanbow/items/9ae48d37aa5b847f1b3b
html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p @mousemove="changeMousePosition">マウスを乗せる</p>
  <p>x:{{ x }}</p>
  <p>y:{{ y }}</p>
</div>
javascript
new Vue({
  el: "#app",
  data: {
    x:0,
    y:0
  },
  methods: {
    changeMousePosition(event) {
      this.x = event.clientX;
      this.y = event.clientY;
    }
  }
})
v-on은 @ 로 생략됨mousemove 이벤트의 changeMousePosition 방법
방법 매개 변수에서 event 를 찾으면 이벤트 정보를 얻을 수 있습니다.console.log(event) 이벤트 정보 보기...

이 아래에도 조라의 정보가 있는데 이번에는 clientXclientY를 사용했다.
그럼 안녕!

좋은 웹페이지 즐겨찾기