《Vue企业开发实战》电子教案14_条件渲染.docxVIP

《网站开发技术（VUE）》·教案14

第PAGE页

一、基本信息

课程名称

网站开发技术（VUE）

授课教材

《Vue企业开发实战》

授课项目

项目6模板语法与常用指令

授课教师

XXX

授课对象

高等职业教育专科软件技术专业

授课方式

讲授+演示+上机

课时

2课时（1次课，理实一体）

授课地点

Web开发实训室

二、教学内容

本课对应课程标准项目6的任务1。掌握v-if、v-else、v-show及选用，能根据登录态、库存等条件展示界面。一次课完成讲授、演示与上机，不拆分课时。

任务

教学内容

课件

任务1条件渲染

v-if；v-else；v-show；v-if与v-show的选择与区别

教材6.1

三、学情分析

学生已能把mock数据放到页面，但“没登录显示按钮、没数据给空态”仍靠注释或两个页面。本课要求能正确选用v-if/v-show。

四、教学目标

（一）知识目标

1.掌握v-if/v-else的条件渲染。

2.掌握v-show的显示隐藏。

3.能说明二者在切换频率、初始渲染上的差异。

（二）能力目标

1.能按条件切换登录/未登录块。

2.能用v-show做高频切换的提示条。

3.能解释为何空列表适合v-if。

（三）素质目标

1.培养对条件指令选用的严谨态度。

2.避免同时滥用导致DOM混乱。

3.规范操作。

五、教学重点与难点

类型

内容

突破办法