v-if不能和v-for在同一标签元素中使用，怎么办？

先复习下v-if和v-for不能放在同一标签使用的原因：

v-for 的优先级比 v-if 的高，所以每次渲染时都会先循环再进条件判断，而又因为 v-if 会根据条件为 true 或 false来决定渲染与否的，所以如果将 v-if 和 v-for一起使用时会特别消耗性能，如果有语法检查，则会报语法的错误。

如何解决这个问题呢？

1、用template放在最外层来解决这个问题。使用template是因为它不会产生新的DOM元素，降低性能的消耗。

<template v-for="(item, index) in payApplyFlieList">
    <el-descriptions-item  :label="item.templateName"  :key="index" v-if="item.updateFileId">
        <div>
              <span>{{ item.updateFileNane }}</span>
        </div>
    </el-descriptions-item>
</template>        

2. 如果条件出现在循环内部，不得不放在一起，可通过计算属性computed 提前过滤掉那些不需要显示的项

<template>
　　<div>
    　　<div v-for="(user,index) in activeUsers" :key="user.index" >{{ user.name }}</div>
　　</div>
</template>
<script>
export default {
　　name:'A',
　　data () {
　　　　return {
　　　　　　users: [{name: 'aaa',isShow: true}, {name: 'bbb',isShow: false}]
　　　　};
　　},
　　computed: {//通过计算属性过滤掉列表中不需要显示的项目
　　　　activeUsers: function () {
　　　　　　return this.users.filter(function (user) {
　　　　　　　　return user.isShow;//返回isShow=true的项，添加到activeUsers数组
　　　　　　})
　　　　}
　　}
};
</script>