【Vue.js】テキストをそのまま表示(v-pre)

Javascript

2018.07.22

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

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