Vue js列表渲染中的过滤器：最佳实践

Question

我正在研究VueJs，因为编程允许多种方式来获得相同的结果（一些或多或少优雅）......我正在思考过滤列表的最佳方法是什么。

以下是我注意到可以过滤列表的一些方法：

我将参考这个新的Vue实例：

new Vue({
  el: '#app',
  data() {
     return {
        selected:['diesel','petrol'],


 cars: [
    {
       "color": "blue",
       "type": "diesel",
    },
    {
       "color": "red",
       "type": "petrol",
    },
    {
       "color": "blue",
       "type": "diesel",
    },
    ]
  }
}

方法＃1：＆＃34; v-show＆＃34;。 任何车型都被推入＆＃34;选择＆＃34;数组将被渲染。

 <div id="app>
     <span v-for="(car, key) in cars"
                    v-show="selected.includes(car.type)"
     >
                {{car.color}} <br>
                {{joke.type}} <br>
     </span>
 </div>

方法＃2：使用computered属性和过滤器

 <div id="app>
     <span v-for="(car, key) in filteredCars">
                {{car.color}} <br>
                {{joke.type}} <br>
     </span>
</div>

computed: {

      filteredCars: function(){
             var selected = this.selected

             return this.cars.filter(function(car){

                 if (selected.indexOf(car.type) >= 0) {
                        return joke.type
                 }
             }
      )}
   }

任何想法和最佳实践？

再次感谢。