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

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

news 2026/2/10 13:20:27

 往期内容

《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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2026/2/8 20:42:53

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2026/2/8 7:23:45

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2026/1/31 5:30:51

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2026/2/1 4:23:19

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2026/2/5 5:24:23

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/2/6 12:27:51