【Vue.js】1度だけ表示(v-once)

Javascript

2018.07.23

Javascript用フレームワーク「Vue.js」で画面に1度だけ表示する方法をソースコード付きでまとめました。

## 画面に1度だけ表示(v-once)

Javascript用フレームワーク「Vue.js」では、v-once属性で画面に1度だけ表示できます。
つまり、Vueによるレンダリングを1度だけ行い、それ以降は変数の値が変わっても表示が変更されなくなります。

## サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<pre title="https://cdn.jsdelivr.net/npm/vue"></pre>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div id="app">
  <input type="text" v-model:value="treasure">
  <div>宝具: <span v-once>{{ treasure }}</span></div>
</div>

<pre title="./js/main.js"></pre>
</body>
</html>

./js/main.js

window.setTimeout(function() {
    var app = new Vue({
        el: '#app',
        data: { treasure: 'Excalibur' }
    });
}, 1000);

–	関連ページ
1	■【Vue.js入門】使い方・サンプル集
2	■Javascript入門サンプル集
3	■Node.js入門