![パソ君](https://jito-site.com/wp-content/uploads/2022/02/computer09_question.png)
パソ君
・Vue.jsで最初の一回だけバインドさせて、それ以降は再変更されない方法ある?
こんな疑問にお答えします。
初回のみバインディングさせて、それ以降は再変更しないように静的な要素で扱いたいときありますよね。
「v-once」ディレクティブを使えば、実装可能です。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ジト
すぐにできるよ!
ということで、この記事では「Vue.jsで初回一度のみバインドさせる方法」について解説していきます!
この記事でわかること
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ディレクティブ】:まとめ
- 「v-once」ディレクティブを使えば初回一度のみバインド可能
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ジト
Vue.jsで初回のみバインドさせたい時はためしてみてね!