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

 往期内容

《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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/62889.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker的常用的容器隔离机制简介

一、Namespace Linux Namespace是Linux内核提供的一种机制,它用于隔离不同进程的资源视图,使得每个进程都拥有独立的资源空间,从而实现进程之间的隔离和资源管理。通过使用Namespace,可以在一个物理主机上创建多个独立的虚拟环境,每个环境都有自己的进程、文件系统、网络…

buuctf-[SUCTF 2019]EasySQL 1解题记录

把你的旗帜给我&#xff0c;我会告诉你这面旗帜是对的。 堆叠注入查询数据库 1; show databases; ​ 查询表名 1; show tables; 获取flag 1;set sql_modepipes_as_concat;select 1

云原生周刊:Kubernetes 和 Docker 的对比

开源项目推荐 Dokploy Dokploy 是一个功能强大的开源平台&#xff0c;为开发者提供与 Vercel、Netlify 和 Heroku 类似的全栈部署与托管体验。它支持现代化的开发工作流&#xff0c;提供快速、可靠的部署服务&#xff0c;涵盖前端、后端和全栈应用。 Dokploy 的开源特性让开…

整数benders分解算法

整数Benders分解算法是一种用于解决混合整数规划问题的算法&#xff0c;由Jacques F. Benders在1962年首次提出。这种算法特别适用于那些包含连续变量和整数变量的极值问题&#xff0c;即混合整数规划问题&#xff08;MIP&#xff09;。在实际应用中&#xff0c;它不仅局限于MI…

Git的基本使用操作

文章目录 Git 全局配置基本操作Git 常用命令版本回退根据版本号回滚分支远端分支 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Git专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月1日12点50分 Git 全局配置 虽然说是全局配置&am…

飞凌嵌入式受邀亮相OpenHarmony人才生态大会2024

2024年11月27日&#xff0c;OpenHarmony人才生态大会2024在武汉洲际酒店举行。在这场汇聚了行业精英、技术大咖及生态伙伴的年度盛会上&#xff0c;飞凌嵌入式作为OpenHarmony社区的重要成员受邀出席&#xff0c;并展示了其在OpenHarmony 4.1系统适配方面的最新成果。 在大会的…

45 基于单片机的信号选择与温度变化

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;采用DS18B20检测温度&#xff0c;通过三种LED灯代表不同状态。 采用DAC0832显示信号脉冲&#xff0c;通过8位数码管显示温度。 信号脉冲可以根据两个按键分别调整为正弦…

Java int[]与ArrayList<>数组 转换 详解

在 Java 中&#xff0c;int[] 与 ArrayList<Integer> 是两种常用的数据结构。由于 int[] 是基本数据类型数组&#xff0c;而 ArrayList<Integer> 是对象集合类型&#xff0c;两者的转换需要注意类型转换的细节。以下是完整的讲解和实现方法。 1. int[] 转换为 Arra…

大数据新视界 -- Hive 基于 MapReduce 的执行原理(上)(23 / 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Qt 2D绘图之三:绘制文字、路径、图像、复合模式

参考文章链接: Qt 2D绘图之三:绘制文字、路径、图像、复合模式 绘制文字 除了绘制图形以外,还可以使用QPainter::darwText()函数来绘制文字,也可以使用QPainter::setFont()设置文字所使用的字体,使用QPainter::fontInfo()函数可以获取字体的信息,它返回QFontInfo类对象…

React-状态管理详解

1、传统MVC框架的缺陷 什么是MVC&#xff1f; MVC的全名是Model View Controller&#xff0c;是模型(model)&#xff0d;视图(view)&#xff0d;控制器(controller)的缩写&#xff0c;是一种软件设计典范。 V即View视图是指用户看到并与之交互的界面。 M即Model模型是管理数…

AI潮汐日报1128期:Sora泄露引发争议、百度早期研究对AI领域Scaling Law的贡献、Meta发布系列AI开源项目

AI 潮汐日报&#xff0c;旨在提供最新潮、最核心、最有意思的AI速递。四大专栏&#xff1a;今日热点、应用速递、研究进展、思维碰撞。 今日热点 OpenAI文本转视频模型Sora泄露引发争议 OpenAI的文本转视频AI模型Sora在Hugging Face上遭遇泄露&#xff0c;泄露者为参与测试的…

PH热榜 | 2024-12-02

1. Muku.ai 标语&#xff1a;AI网红广告代理公司 介绍&#xff1a;木库AI是家AI网红营销机构&#xff0c;利用AI虚拟形象创作用户原创视频广告。只需提供产品链接&#xff0c;就能生成吸引人的内容&#xff0c;从而提升各大平台的销售额。 产品网站&#xff1a; 立即访问 P…

Flink学习连载文章9--状态(State)

State state 可以理解为-- 历史计算结果 有状态计算和无状态计算 无状态计算: 不需要考虑历史数据, 相同的输入,得到相同的输出!如:map, 将每个单词记为1, 进来一个hello, 得到(hello,1),再进来一个hello,得到的还是(hello,1) 有状态计算: 需要考虑历史数据, 相同的输入,可…

go和python的遍历对比

Go 和 Python 都有强大的循环控制结构&#xff0c;但它们在实现和行为上有所不同&#xff0c;特别是关于索引变量的管理、迭代器的使用以及如何在循环中修改循环变量。以下是 Go 和 Python 循环的详细差异分析&#xff1a; 1. 循环类型&#xff1a; Go&#xff1a; Go 使用 …

嵌入式硬件面试题【经验】总结----会不断添加更新

目录 引言 一、电阻 1、电阻选型时一般从那几个方面考虑 2、上拉电阻的作用 3、PTC热敏电阻作为电源电路保险丝的工作原理 4、如果阻抗不匹配&#xff0c;有哪些后果 二、电容 1、电容选型一般从哪些方面进行考虑? 2、1uf的电容通常来滤除什么频率的信号 三、三极管…

Linux——基础命令(2) 文件内容操作

目录 ​编辑 文件内容操作 1.Vim &#xff08;1&#xff09;移动光标 &#xff08;2&#xff09;复制 &#xff08;3&#xff09;剪切 &#xff08;4&#xff09;删除 &#xff08;5&#xff09;粘贴 &#xff08;6&#xff09;替换,撤销,查找 &#xff08;7&#xff…

Stable Diffusion 3详解

&#x1f33a;系列文章推荐&#x1f33a; 扩散模型系列文章正在持续的更新&#xff0c;更新节奏如下&#xff0c;先更新SD模型讲解&#xff0c;再更新相关的微调方法文章&#xff0c;敬请期待&#xff01;&#xff01;&#xff01;&#xff08;本文及其之前的文章均已更新&…

微信小程序——文档下载功能分享(含代码)

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

高校心理教育辅导系统

私信我获取源码和万字论文&#xff0c;制作不易&#xff0c;感谢点赞支持。 摘 要 随着Internet技术的发展&#xff0c;心理教育辅导系统应运而生&#xff0c;心理教育辅导系统为用户提供了一个更为便利的心理测试咨询平台。所以&#xff0c;为了充分满足高校学生心理教育辅导…