v-onceで一度だけ描画。その後は変えたくない！ ❏Vue.js❏

v-onceとは

最初に描画したものだけを永遠に表示します。
その後に代入して値を変えることはできません。

使い方

タグの中にv-onceを書く。

開発環境はJSFiddleです。
https://qiita.com/ITmanbow/items/9ae48d37aa5b847f1b3b

html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p v-once>{{ message }}</p>
  <p>{{ sayHi() }}</p>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    message: "hello world!"
  },
  methods: {
    sayHi: function() {
      this.message = "hello Vue.js!"
      return this.message;
    }
  }
})

【出力結果】
hello world!
hello Vue.js!

解説

sayHiメソッドでthis.message = "hello Vue.js!"と値を書き換えていまス。
しかし、v-onceを書いた1つ目のpタグの表示はhello world!のままで変わりません。

2つ目のｐタグは書き換えられたmessageが返りhello Vue.js!と表示されます。

いつか使うときを信じて、ここにお納めします。。
ではまた！