v-show: display noneで見えなくしてるだけ。表示しなおしても作り直されることはない。
v-if: htmlから要素が削除される。表示しなおすたびに要素が作り直される。
配列が何もないときの表示切り替えのサンプルを v-show と v-if で。
See the Pen Vue.js v-show v-if sample by takapen (@takapen) on CodePen.
- {{ todo.title }} x
- todoがないよ
v-for は v-if よりも先に実行される。
todos が空の場合はそもそもループが回らないので、そのあとの v-if の判定も行われず、結局何も表示されないという仕組み。
分けて書いたらいいのでulに v-if を書いて対応する。
- {{ todo.title }} x
- todoがないよ
(function () { 'use strict'; Vue.config.devtools = true; var vm = new Vue({ el: '#app1', data: { newItem: '', todos: [{ title: 'task1', isDone: false }, { title: 'task2', isDone: true }] }, methods:{ deleteItem: function (index) { this.todos.splice(index,1);//index番目から1つ削除 } } }) })(); (function () { 'use strict'; Vue.config.devtools = true; var vm = new Vue({ el: '#app2', data: { newItem: '', todos: [{ title: 'task1', isDone: false }, { title: 'task2', isDone: true }] }, methods:{ deleteItem: function (index) { this.todos.splice(index,1);//index番目から1つ削除 } } }) })();