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

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

news 2026/5/24 17:55: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

如何攻克Sunshine虚拟手柄延迟与兼容性难题？深度解析实战解决方案

如何攻克Sunshine虚拟手柄延迟与兼容性难题&#xff1f;深度解析实战解决方案 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 你是否曾遇到过这样的困境&#xff1a;在Moonlight客…...

编程新知 2026/5/24 17:22:46

从云服务器到树莓派：不同场景下Linux IP地址类型的管理与查看技巧（ip/nmcli实战）

从云服务器到树莓派&#xff1a;Linux IP地址管理的场景化实战指南在混合计算环境中工作的开发者常常面临一个看似简单却充满陷阱的问题&#xff1a;如何快速确定当前Linux设备的IP地址类型&#xff1f;这个问题在公有云、本地虚拟机和嵌入式设备等不同场景下有着截然不同的答案…...

编程新知 2026/5/24 16:57:34

【限时开放】DeepSeek R1/R2安全加固白皮书（含32项合规检测Checklist+自动扫描脚本）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek模型安全加固概述 DeepSeek系列大语言模型在开源生态中广泛应用&#xff0c;但其默认部署配置存在若干潜在安全风险&#xff0c;包括提示注入、越权推理、敏感信息泄露及未经授权的模型微调访问。安全…...

编程新知 2026/5/24 16:49:07

Python安全自动化：构建可落地的渗透测试工作流

1. 这不是炫技工具箱&#xff0c;而是一套可落地的安全工作流“黑客的‘瑞士军刀’”这个说法在安全圈里被用滥了——很多人一听到就想到Kali Linux里那堆图标花哨、命令冗长、跑起来动不动就报错的GUI工具。但真正干过渗透测试的人心里都清楚&#xff1a;能稳定复现、可嵌入流…...

编程新知 2026/5/24 15:54:42

高效智能的Chrome全页截图插件：完整网页保存的终极解决方案

高效智能的Chrome全页截图插件&#xff1a;完整网页保存的终极解决方案 【免费下载链接】full-page-screen-capture-chrome-extension One-click full page screen captures in Google Chrome 项目地址: https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chrome-…...

编程新知 2026/5/24 15:42:04

为什么你的ChatGPT文案点赞不过50？：曝光量断层背后的3个隐藏信号+实时诊断自查表（附赠算法工程师内部校验清单）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;为什么你的ChatGPT文案点赞不过50&#xff1f; 你精心打磨的ChatGPT提示词&#xff0c;生成了逻辑清晰、文风优雅的文案&#xff0c;却在社交平台仅收获47个赞——这并非内容质量的问题&#xff0c;而是**人机…...

编程新知 2026/5/24 14:37:49

构建企业级离线词典服务：ECDICT高性能架构设计与毫秒级查询优化

构建企业级离线词典服务&#xff1a;ECDICT高性能架构设计与毫秒级查询优化 【免费下载链接】ECDICT Free English to Chinese Dictionary Database 项目地址: https://gitcode.com/gh_mirrors/ec/ECDICT ECDICT是一个拥有150万词汇量的开源中英文词典数据库&#xff0c…...

编程新知 2026/5/24 14:00:51

AI教材生成新突破！低查重AI写教材工具，快速打造专业教材书稿！

写教材的过程&#xff0c;总能遇到“慢节奏”带来的各种困扰。虽然框架和材料已经准备好&#xff0c;但内容撰写却常常陷入瓶颈——一句话反复推敲半小时&#xff0c;总觉得不够完美&#xff1b;章节之间的衔接过渡&#xff0c;总是费尽脑筋也找不到合适的表述&#xff0c;创作…...

编程新知 2026/5/24 13:42:35

Postman便携版：基于Portapps架构的无痕API测试环境构建方案

Postman便携版&#xff1a;基于Portapps架构的无痕API测试环境构建方案 【免费下载链接】postman-portable &#x1f680; Postman portable for Windows 项目地址: https://gitcode.com/gh_mirrors/po/postman-portable 在API开发与测试领域&#xff0c;Postman已成为开…...

编程新知 2026/5/24 13:22:10

告别VNC客户端！用noVNC在浏览器里远程操控CentOS桌面，附Xshell/Xftp联动技巧

浏览器原生远程桌面方案&#xff1a;noVNC与终端工具链的高效整合指南每次连接远程服务器都要切换多个客户端的日子该结束了。想象一下这样的场景&#xff1a;清晨的咖啡馆里&#xff0c;你只需打开浏览器就能直接访问CentOS的图形界面&#xff0c;同时在一个标签页里用Xshell执…...

编程新知 2026/5/24 12:53:06