# 练习 4：条件渲染和列表渲染

## 目标

学会根据状态显示不同内容，并用 `v-for` 渲染一组数据。

## 你要练什么

- `v-if`
- `v-else`
- `v-show`
- `v-for`
- `:key`

## 任务

请基于页面结构完成以下操作：

- 切换“是否展开课程列表”
- 根据是否付费显示不同文案
- 用 `v-for` 渲染课程数组

## 文件

- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/04-conditional-and-list-rendering/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/04-conditional-and-list-rendering/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/04-conditional-and-list-rendering/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/04-conditional-and-list-rendering/answer.js)