Vue.js @mousedownでmousedownイベントを取得する

2023年1月2日

環境
Windows 10 Home 64bit
Vue.js 5.0.8
Google Chrome 108.0.5359.125（Official Build）（64 ビット）

構文
v-on:mousedown="セレクタID名"
@mousedown　="セレクタID名"
セレクタID名: function () {
処理コード
}
「v-on:mousedown」を使用してmousedownイベントを取得します。

使用例

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mousedownイベントサンプル</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
      <h2 >{{val}}</h2>

      <a v-on:mousedown="cft" >test</a>

  </div>
  <script>

    const res = {
      data() {
        return {
          val: ''
        }
      },
      methods: {
        cft: function () {
          this.val = 'マウスダウンされました'
        }
      }
    }

    Vue.createApp(res).mount('#app')

  </script>
</body>

</html>

結果
文字「test」をマウスを押下した状態にすると「マウスダウンされました」というテキストを表示します。

Vue.js

Posted by arkgame

Related posts: