self修飾子

2024 5/31

2024.05.31 2024.05.31

self修飾子は、イベントが自身の要素でのみ発生した場合にハンドラを実行します。

self修飾子

記法

v-model.lazy=”データプロパティ名”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>self修飾子について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <div v-if="showModal" class="modal" @click.self="closeModal">
        <div class="modal-content">
          <p>
            モーダル内のコンテンツです。ここをクリックしてもモーダルは閉じません。
          </p>
          <button @click="closeModal">閉じる</button>
        </div>
      </div>
    </div>
    <!-- CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

// Vueアプリケーションの作成とマウント
Vue.createApp({
  data() {
    return {
      showModal: true,
    };
  },
  methods: {
    // self修飾子を使用したモーダルクローズハンドラ
    closeModal() {
      this.showModal = false;
      alert("モーダルが閉じられました");
    },
  },
}).mount("#app");

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.btn {
  margin-top: 10px;
}

出力結果