MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. once修飾子

once修飾子

Vue.js
2024.05.31

once修飾子は、イベントが一度だけ実行されるように設定する修飾子です。
※イベントがトリガーされた後、リスナーは自動的に削除される

once修飾子
記法

v-on:イベント.once=”イベント名”
@イベント.once=”イベント名”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>once修飾子について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <button class="primary-button" @click.once="useOnceCoupon">
        一度だけクーポン使用
      </button>
      <p id="once-message">{{ onceMessage }}</p>
      <p>一度だけクーポン使用ボタンクリック回数: {{ onceClickCount }}</p>
      <hr />
      <button class="primary-button" @click="useNormalCoupon">
        何度でもクーポン使用
      </button>
      <p id="normal-message">{{ normalMessage }}</p>
      <p>何度でもクーポン使用ボタンクリック回数: {{ normalClickCount }}</p>
    </div>
    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// Vueアプリケーションの作成とマウント
const app = Vue.createApp({
  data() {
    return {
      onceMessage: "クーポンを使用してください！",
      normalMessage: "クーポンを使用してください！",
      onceClickCount: 0,
      normalClickCount: 0,
    };
  },
  methods: {
    useOnceCoupon() {
      this.onceClickCount++;
      this.onceMessage = `クーポンが${this.onceClickCount}回使用されました！`;
    },
    useNormalCoupon() {
      this.normalClickCount++;
      this.normalMessage = `クーポンが${this.normalClickCount}回使用されました！`;
    },
  },
}).mount("#app");
.primary-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

.primary-button:hover {
  background-color: #2980b9;
}

#once-message,
#normal-message {
  margin-top: 20px;
  font-size: 18px;
  color: #2c3e50;
}
出力結果

{{ onceMessage }}

一度だけクーポン使用ボタンクリック回数: {{ onceClickCount }}

{{ normalMessage }}

何度でもクーポン使用ボタンクリック回数: {{ normalClickCount }}

Vue.js