《Vue企业开发实战》电子教案10_class与style绑定.docxVIP

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

第PAGE页

一、基本信息

课程名称

网站开发技术（VUE）

授课教材

《Vue企业开发实战》

授课项目

项目4初识Vue3

授课教师

XXX

授课对象

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

授课方式

讲授+演示+上机

课时

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

授课地点

Web开发实训室

二、教学内容

本课对应课程标准项目4的任务3。掌握v-bind及class、style的对象/数组写法，能完成动态样式绑定。一次课完成讲授、演示与上机，不拆分课时。

任务

教学内容

课件

任务3class与style绑定

v-bind；class对象语法与数组语法；内联style绑定

教材4.3

三、学情分析

学生已会插值，但改外观仍去改css文件或写死class。本课要求能根据数据切换高亮、颜色，理解:class是v-bind:class的简写。

四、教学目标

（一）知识目标

1.掌握v-bind的作用与简写。

2.掌握class的对象语法、数组语法。

3.掌握style对象绑定。

（二）能力目标

1.能按条件为元素添加/移除class。

2.能绑定内联样式对象。

3.能完成动态样式小练习（如选中高亮）。

（三）素质目标

1.培养对数据驱动样式的严谨态度。

2.规范命名class。

3.协作排错。

五、教学重点与难点

类型

内容

突破办法

重点

:cla