1、當 v-for 與 v-if 一起使用時，v-for 的優先順序比 v-if更高。這意味著v-if分別重複執行於每個 v-for迴圈中。

如果渲染一個列表時，需要按照條件來渲染，那麼需要v-for與v-if一起使用了。

2、Vue官方不建議v-if和v-for同時用在一個元素上，因為一起使用的話，每一個元素都會新增一個v-if,

重複運行於每一個v-for迴圈中，會造成效能的浪費。

3、建議使用computed計算屬性來解決這個（按照條件來渲染列表）問題。

<template>
     <div v-for='(item,index) in newItems' :key
 
='index'><!--3、使用computed計算屬性,直接返回篩選過濾後的結果，把結果資料直接當列表資料來源使用-->
          {{item.title}}
     </div>
</template>
<script>
    let data={
        items:[
            {title:'羊肉串',isShow:true},
            {title:'豬肉串',isShow:false},
            {title:'牛肉串',isShow:true},
            {title:
 
'饅頭片',isShow:true},
            {title:'麵包片',isShow:false}
        ]
    };

    computed:{//3、建議使用computed計算屬性來解決這個（按照條件來渲染列表）問題。
        newItems(){             //其實使用了computed計算屬性的getter
            return this.items.filter((item)=>{
               return item.isShow==true;
            });
        }
    }
    
 
</script>