v-for 和 v-if 出现在同一元素或者组件上解决方法

v-for 和 v-if 不要出现在同一元素或者组件上。
两种情形：
（1）某个条件不符合的时候，整个列表不需要渲染。
解决方案是把v-if放置在外层组件上面
<ul v-if="showInfo"> <li v-for="item in list" :key="item.id"> </ul>
(2)列表中根据某个字段来判断，条件符合则显示该条数据
错误写法：
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
好的写法：
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}

            <ul>
                <li
                    v-for="user in activeUsers"
                    :key="user.id"
                >
                    {{ user.name }}
                </li>
            </ul>