v-for 和 v-if 的优先级

v-for 和 v-if 不建议连用

因为在vue当中v-for 的优先级比 v-if 高，会先执行v-for去循环出数组中的所有内容，然后再看数组每一个内容上的v-if，才决定是否显示，这样很明显不合理

所以可以采取以下做法，先判断v-if

<div id="app">
    <ul v-if="flag">
        <li v-for="(item,index) in arr">{{index}}---{{item}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            flag: true,
            arr: ['h', 'e', 'l', 'l', 'o']
        }
    })
</script>