Javascript用フレームワーク「Vue.js」でテキストをそのまま表示(v-pre)する方法をソースコード付きでまとめました。
## テキストをそのまま表示(v-pre)
Javascript用フレームワーク「Vue.js」では、v-pre属性で{{ … }}を直接表示できます。
v-preをつけた要素とその子要素はデータバインディングがスキップされるため、描画が高速になります。
書式
<div v-pre>宝具: {{ treasure }}</div>
## サンプルコード
サンプルプログラムのソースコードです。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<pre title="https://cdn.jsdelivr.net/npm/vue"></pre>
</head>
<body>
<div id="app">
<div v-pre>宝具: {{ treasure }}</div>
<div>宝具: {{ treasure }}</div>
</div>
<pre title="./js/main.js"></pre>
</body>
</html>
./js/main.js
var app = new Vue({
el: '#app',
data: { treasure: 'Excalibur' }
});
実行結果
宝具: {{ treasure }}
宝具: Excalibur
## 関連ページ

【Vue.js入門】使い方・サンプル集
Vue.jsの使い方を入門者向けにサンプルコード付きでまとめました。

【TypeScript入門】使い方まとめ
TypeScriptの基礎文法、使い方について入門者向けにまとめました。

WEB開発入門速報|
コメント