これ知らなかったのですが、生のHTMLにマスタッシュを記述すると消えてしまうんですね。

どういうことかというと、下記のようなコードがあってitemsに要素をいくつか突っ込んで、それを表示したいとします。

1
2
3
4
5
6
7
8
9
10
new Vue({
el: '#app',
data: {
items: [],
},
mounted: function () {
this.items.push("テスト");
this.items.push("テスト2");
this.items.push("テスト3");
},

HTML側でマスタッシュを使って書くとこうなのですが…

1
2
3
4
5
<ul v-for="item in items">
<li>
{{item}}
</li>
</ul>

これを表示するとこんな感じで何も表示されなくなります。レンダリング時にマスタッシュが消えてしまっているっぽいのが原因のようです。

これに対応するにはv-textを使います。

1
2
3
4
5
6
<ul>
<div v-for="item in items">
<li v-text="item">
</li>
</div>
</ul>

こういう風に書くと、下記のように表示されます。