难度级别：初级及以上                                 提问概率：50% 

---

在初学者看来，v-for和v-if同时使用是非常方便的，二者共同使用的常见场景有两种。例如有两个列表，分别用于渲染学生数据和老师数据，然后有两个单选按钮，用于切换当前页面中需要展示学生列表还是老师列表，这个时候用v-if进行判断就非常方便，代码如下

Vue代码：
<template>
    <ul>
        <li v-for="item in studentData" v-if="type='student'"></li>
    </ul>
</template>
<script>
    export default {
        data() {
            return {
                type: 'teacher',
                // 仅用于示例讲解，学生数据可自行添加
                studentData: []
            }
        }
    }
</script>

 还有一种场景，例如在循环学生列表的同时添加筛选项，只展示成绩大于等于60分的学生数据&#x