【解説】Vue.jsで初回一度のみバインドさせる方法【v-onceディレクティブ】

パソ君

・Vue.jsで最初の一回だけバインドさせて、それ以降は再変更されない方法ある？

こんな疑問にお答えします。

初回のみバインディングさせて、それ以降は再変更しないように静的な要素で扱いたいときありますよね。

「v-once」ディレクティブを使えば、実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「Vue.jsで初回一度のみバインドさせる方法」について解説していきます！

【解説】Vue.jsで初回一度のみバインドさせる方法【v-onceディレクティブ】

Vue.jsで初回のみバインドさせて、それ以降は再変更しないようにするには「v-once」ディレクティブを使えば実装できます。

使い方はこんな感じ↓

<p v-once>{{ message }}</p>

初回のみバインドさせたいタグに、v-onceをつけます。

サンプル例

下記がサンプルコードです↓

See the Pen vue　v-once① by jito-coder (@jito-coder) on CodePen.

<div id="app">
  <input v-model="message" type="text">
  <p>{{ message }}</p>
  <p v-once>{{ message }}</p>
</div>

const app = Vue.createApp({
  data: () => ({
    message: 'おはようございます'
  })
}).mount('#app')

「v-once」ディレクティブがついている下の文章については、inputタグ内のテキストを変更しても変わりません。

初回のみバインドされて、再度バインドされず静的な要素となります。

【解説】Vue.jsで初回一度のみバインドさせる方法【v-onceディレクティブ】：まとめ

ジト

Vue.jsで初回のみバインドさせたい時はためしてみてね！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙