Vue.js v-show と v-if のサンプル

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つ削除
      }
    }
  })

})();