<div id="app">
  <div class="sort">
    <label><input type="checkbox" name="check" value="red" v-model="checkedColor" v-on:change="filterColor">赤</label>
    <label><input type="checkbox" name="check" value="yellow" v-model="checkedColor" v-on:change="filterColor">黄色</label>
    <label><input type="checkbox" name="check" value="green" v-model="checkedColor" v-on:change="filterColor">緑</label>
  </div>
  <ul class="list">
    <li v-for="item in items" v-show="item.display">
      {{ item.name }}
    </li>
  </ul>
</div>
new Vue({
  el: "#app",
  data: {
    items: [
    	{
        name: 'りんご',
        color: 'red',
        display: true
      },
      {
        name: 'バナナ',
        color: 'yellow',
        display: true
      },
      {
        name: 'いちご',
        color: 'red',
        display: true
      },
      {
        name: 'マスカット',
        color: 'green',
        display: true
      },
      {
        name: 'レモン',
        color: 'yellow',
        display: true
      }
    ],
    checkedColor: []
  },
  methods: {
  	filterColor: function () {
    	var items = this.items;
      var checkedColor = this.checkedColor;
      
      if (checkedColor.length > 0) {
        for (var i = 0; i < items.length; i++) {
         var color = items[i].color;
           for (var j = 0; j < checkedColor.length; j++) {
            if (color.indexOf(checkedColor[j]) >= 0) {
              items[i].display = true;
              break;
            } else {
              items[i].display = false;
            }
          }
        }
      } else {
      	this.resetFilter();
      }
    },
    resetFilter: function(){
    	for (var i = 0; i < this.items.length; i++) {
        this.items[i].display = true;
      }
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js