3435848495
- Implement dynamic styles and event handling in Vue2 with a card component. - Create lifecycle methods exercise to simulate async data loading and instance destruction. - Develop a component communication exercise with props, events, and slots. - Build a comprehensive course management dashboard with filtering, statistics, and component interactions.
29 lines
851 B
Markdown
29 lines
851 B
Markdown
# 练习 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)
|