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

2024年4月29日

記事内に広告を含みます

パソ君

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

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

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

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

ジト

すぐにできるよ！

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

この記事でわかること

Vue.jsで初回一度のみバインドさせる方法

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で初回のみバインドさせたい時はためしてみてね！