v-onceは、値を一度だけデータをバインドするディレクティブになります。
記法
[ HTML ] =============================
<要素名 v-once>{{ データプロパティ名 }}</要素名>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-onceについて</title>
</head>
<body>
<div id="app">
<p>ボタンをクリックして変化を確認してみましょう。</p>
<button @click="changeMessage">ボタン</button>
<p v-once>{{ message }}</p>
<p>{{ message }}</p>
</div>
<script src="./js/once.js"></script>
</body>
</html>Vue.createApp({
data() {
return {
message: "こんにちは",
};
},
methods: {
changeMessage() {
this.message = "こんばんわ";
},
},
}).mount("#app");出力結果
ボタンをクリックして変化を確認してみましょう。
{{ message }}
{{ message }}