当前位置： 首页 > news >正文

《Vue零基础入门教程》第十五课：样式绑定

news 2025/7/7 13:41:20

 往期内容

《Vue零基础入门教程》第六课：基本选项

《Vue零基础入门教程》第八课：模板语法

《Vue零基础入门教程》第九课：插值语法细节

《Vue零基础入门教程》第十课：属性绑定指令

《Vue零基础入门教程》第十一课：事件绑定指令

《Vue零基础入门教程》第十二课：双向绑定指令

《Vue零基础入门教程》第十三课：条件渲染

《Vue零基础入门教程》第十四课：列表渲染

1) 什么是样式绑定

通过绑定class属性 或者 style属性 修改样式

2) 绑定class属性

常见有两种语法

  • 数组写法
  • 对象写法

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script><style>.red {color: red;}.blue {color: skyblue;}</style></head><body><div id="app"><!-- 原生的写法 --><span class="red blue">一段文字</span><!-- 绑定class属性 -- 对象的写法 --><span :class="obj">对象的写法</span><!-- 绑定class属性 -- 数组的写法(推荐) --><span :class="arr">数组的写法</span><span :class="foo">绑定一个变量</span><span :class="flag ? 'red' : 'blue'">使用表达式</span></div><script>const { createApp } = Vueconst vm = createApp({data() {return {obj: {red: true,blue: true,},arr: ['red', 'blue'],foo: 'red',flag: true,}},}).mount('#app')</script></body>
</html>

3) 绑定style属性

对象写法

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"><!-- 原生的写法 --><div style="font-size: 32px; color: red">原生的写法</div><!-- 绑定style属性 -- 对象写法 --><div :style="obj">对象的写法</div></div><script>const { createApp } = Vueconst vm = createApp({data() {return {obj: {// 'font-size': '32px',fontSize: '32px',color: 'red',},}},}).mount('#app')</script></body>
</html>

4) 作业
💡 需求
实现京东tab栏切换

GIF.gif

参考答案

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 1.1 引入vue.js --><script src="../node_modules/vue/dist/vue.global.js"></script><!-- 2.2 实例静态页面(CSS部分) --><style>* {margin: 0;padding: 0;}li {list-style: none;}.menu-tab {display: flex;justify-content: space-between;margin: 50px auto;height: 40px;width: 700px;border: 1px solid #eee;border-bottom: 1px solid #e4393c;background-color: #f7f7f7;box-sizing: border-box;}.menu-tab .menu-item {flex: 1;display: flex;justify-content: center;align-items: center;font-size: 14px;color: #666;cursor: pointer;}.menu-tab .menu-item:hover {color: #e4393c;}.menu-tab .menu-item.current {color: #fff;background-color: #e4393c;}</style></head><body><!-- 1.2 编写页面容器 --><div id="app"><!-- 2.1 实例静态页面(HTML部分) --><ul class="menu-tab"><!-- <liv-for="(item, index) in items"class="menu-item":class="index == active ? 'current' : '' "@click="active = index"> --><liv-for="(item, index) in items"class="menu-item":class="index == active ? 'current' : '' "@click="handleClick(index)">{{item}}</li></ul></div><!-- 1.3 创建vue实例对象 --><script>const { createApp } = Vueconst vm = createApp({data() {return {items: ['商品介绍', '规格与包装', '售后保障', '商品评价(2000+)', '手机社区'],active: 0,}},methods: {handleClick(i) {console.log(i)this.active = i},},}).mount('#app')</script></body>
</html>

相关文章：

《Vue零基础入门教程》第十五课：样式绑定

往期内容 《Vue零基础入门教程》第六课&#xff1a;基本选项 《Vue零基础入门教程》第八课&#xff1a;模板语法 《Vue零基础入门教程》第九课&#xff1a;插值语法细节 《Vue零基础入门教程》第十课&#xff1a;属性绑定指令 《Vue零基础入门教程》第十一课&#xff1a;事…...

编程日记 2024/12/4 3:22:05

以AI算力助推转型升级，暴雨亮相CCF中国存储大会

2024年11月29日-12月1日&#xff0c;CCF中国存储大会&#xff08;CCF ChinaStorage 2024&#xff09;在广州市长隆国际会展中心召开。本次会议以“存力、算力、智力”为主题&#xff0c;由中国计算机学会&#xff08;CCF&#xff09;主办&#xff0c;中山大学计算机学院、CCF信…...

编程日记 2024/12/4 3:18:01

【VMware】Ubuntu 虚拟机硬盘扩容教程（Ubuntu 22.04）

引言 想装个 Anaconda&#xff0c;发现 Ubuntu 硬盘空间不足。 步骤 虚拟机关机 编辑虚拟机设置 扩展硬盘容量 虚拟机开机 安装 gparted sudo apt install gparted启动 gparted sudo gparted右键sda3&#xff0c;调整分区大小 新大小拉满 应用全部操作 调整完成...

编程日记 2024/12/4 3:15:58

3D Bounce Ball Game 有什么技巧吗？

关于3D Bounce Ball Game&#xff08;3D弹球游戏&#xff09;的开发&#xff0c;以下是一些具体的技巧和实践建议&#xff1a; 1. 物理引擎的使用&#xff1a; 在Unity中&#xff0c;使用Rigidbody组件来为游戏对象添加物理属性&#xff0c;这样可以让物体受到重力影响并发…...

编程日记 2024/12/4 3:14:57

【SQL】实战--组合两个表

题目描述 表: Person ---------------------- | 列名 | 类型 | ---------------------- | PersonId | int | | FirstName | varchar | | LastName | varchar | ---------------------- personId 是该表的主键&#xff08;具有唯一值的列&#xff09;…...

编程日记 2024/12/4 3:13:56

Spring基于注解实现 AOP 切面功能

前言 在Spring AOP&#xff08;Aspect-Oriented Programming&#xff09;中&#xff0c;动态代理是常用的技术之一&#xff0c;用于在运行时动态地为目标对象生成代理对象&#xff0c; 并拦截其方法调用。Spring AOP 默认使用两种类型的动态代理机制&#xff1a;JDK 动态代理和…...

编程日记 2024/12/4 3:12:56

设计模式 更新ing

设计模式 1、六大原则1.1 单一设计原则 SRP1.2 开闭原则1.3 里氏替换原则1.4 迪米特法则1.5 接口隔离原则1.6 依赖倒置原则 2、工厂模式 1、六大原则 1.1 单一设计原则 SRP 一个类应该只有一个变化的原因 比如一个视频软件&#xff0c;区分不同的用户级别 包括访客&#xff0…...

编程日记 2024/12/4 3:06:48

Elasticsearch 进阶

核心概念 索引(Index) 一个索引就是一个拥有几分相似特征的文档的集合。比如说&#xff0c;你可以有一个客户数据的索引&#xff0c;另一个产品目录的索引&#xff0c;还有一个订单数据的索引。一个索引由一个名字来标识(必须全部是小写字母)&#xff0c;并且当我们要对这个索…...

编程日记 2024/12/4 3:05:43

【AI】Sklearn

长期更新&#xff0c;建议关注、收藏、点赞。 友情链接&#xff1a; AI中的数学_线代微积分概率论最优化 Python numpy_pandas_matplotlib_spicy 建议路线&#xff1a;机器学习->深度学习->强化学习 目录 预处理模型选择分类实例&#xff1a; 二分类比赛 网格搜索实例&…...

编程日记 2024/12/4 3:04:41

通过 JNI 实现 Java 与 Rust 的 Channel 消息传递

做纯粹的自己。“你要搞清楚自己人生的剧本——不是父母的续集，不是子女的前传，更不是朋友的外篇。对待生命你不妨再大胆一点，因为你好歹要失去它。如果这世上真有奇迹，那只是努力的另一个名字”。 一、crossbeam_channel 参考 crossbeam_channel - Rust crossbeam_channel…...

编程日记 2024/12/4 3:03:39

【老白学 Java】对象的起源 Object

对象的起源 Object 文章来源&#xff1a;《Head First Java》修炼感悟。 上一篇文章中&#xff0c;老白学习了抽象类和抽象方法&#xff0c;不禁感慨&#xff0c;原来 Java 还可以这样玩。 同时又有了新的疑问&#xff0c;这些父类从何而来的&#xff1f; 本篇文章老白来聊一聊…...

编程日记 2024/12/4 2:49:22

Ubuntu Linux操作系统

一、 安装和搭建 Thank you for downloading Ubuntu Desktop | Ubuntu &#xff08;这里我们只提供一个下载地址&#xff0c;详细的下载安装可以参考其他博客&#xff09; 二、ubuntu的用户使用 2.1 常规用户登陆方式 在系统root用户是无法直接登录的,因为root用户的权限过…...

编程日记 2024/12/4 2:45:13

SpringBoot 打造的新冠密接者跟踪系统：企业复工复产防疫保障利器

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古…...

编程日记 2024/12/4 2:41:09

嵌入式Linux（SOC带GPU树莓派）无窗口系统下搭建 OpenGL ES + Qt 开发环境，并绘制旋转金字塔

树莓派无窗口系统下搭建 OpenGL ES Qt 开发环境&#xff0c;并绘制旋转金字塔 1. 安装 OpenGL ES 开发环境 运行以下命令安装所需的 OpenGL ES 开发工具和库&#xff1a; sudo apt install cmake mesa-utils libegl1-mesa-dev libgles2-mesa-dev libdrm-dev libgbm-dev2. 安…...

编程日记 2024/12/4 2:37:06

webGL入门教程_06变换矩阵与绕轴旋转总结

变换矩阵与绕轴旋转总结 目录 1. 变换矩阵简介2. 平移矩阵3. 缩放矩阵4. 旋转矩阵 4.1 绕 Z 轴旋转4.2 绕 X 轴旋转4.3 绕 Y 轴旋转 5. 组合变换矩阵6. 结论 1. 变换矩阵简介 在计算机图形学中&#xff0c;变换矩阵用于在三维空间中对物体进行操作&#xff0c;包括&#xff…...

编程日记 2024/12/4 2:36:05

生成树详解（STP、RSTP、MSTP）

目录 1、STP 1.概述 2.基本概念 3.端口角色及其作用 4.报文结构 5.STP的端口状态 6.三种定时器 7.STP选举步骤 8.配置BPDU的比较原则 9.TCN BPDU 10.临时环路的问题 11.传统STP的不足 拓扑变更处理过程 2、RSTP 1.端口角色 2.端口状态 3.P/A&#xff08;Propo…...

编程日记 2024/12/4 2:27:57

【QNX+Android虚拟化方案】128 - QNX 侧触摸屏驱动解析

【QNX+Android虚拟化方案】128 - QNX 侧触摸屏驱动解析 一、QNX 侧触摸屏配置基于原生纯净代码，自学总结 纯技术分享，不会也不敢涉项目、不泄密、不传播代码文档！！！ 本文禁止转载分享 ！！！ 汇总链接：《【QNX+Android虚拟化方案】00 - 系列文章链接汇总》 本文链接：《【…...

编程日记 2024/12/4 2:26:56

C#中的集合初始化器

C#中的集合初始化器是一种简洁的语法&#xff0c;允许在声明集合的同时初始化其元素。这种语法特别适用于初始化实现了IEnumerable接口并具有Add方法的集合类型&#xff0c;如List<T>、Dictionary<TKey, TValue>等。 集合初始化器的基本用法 集合初始化器的基本语…...

编程日记 2024/12/4 2:22:52

cartographer建图与定位应用

文章目录 前言一、安装cartographer1.安装环境2.源码编译2.1 下载2.2 编译 二、gazebo仿真2d建图0.准备仿真环境1.编写lua文件2.编写启动文件3.建图保存 三、cartographer定位 move_base导航3.1 编写启动文件3.2 启动launch 总结 前言 本文介绍cartographer在ubuntu18.04下的…...

编程日记 2024/12/4 2:21:51

专业解析 .bashrc 中 ROS 工作空间的加载顺序及其影响 ubuntu 机器人

专业解析 .bashrc 中 ROS 工作空间的加载顺序及其影响 在使用 ROS&#xff08;Robot Operating System&#xff09;进行开发时&#xff0c;通常会涉及多个 Catkin 工作空间&#xff08;Catkin Workspace&#xff09;。这些工作空间包含不同的 ROS 包和节点&#xff0c;可能相互…...

编程日记 2024/12/4 2:18:46

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/7/6 17:44:28

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/7/6 1:11:45

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/6/26 0:06:54

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/6/21 4:17:55

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/7/5 11:46:14

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/7/2 12:22:47

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/7/7 8:27:43

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/7/6 20:35:17

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/7/4 14:04:03

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/6/20 13:47:44