《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,一经查实,立即删除!

相关文章

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

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

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位数码管显示温度。 信号脉冲可以根据两个按键分别调整为正弦…

大数据新视界 -- 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模型是管理数…

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) 有状态计算: 需要考虑历史数据, 相同的输入,可…

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

目录 引言 一、电阻 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;当前专栏…

开源的跨平台SQL 编辑器Beekeeper Studio

一款开源的跨平台 SQL 编辑器&#xff0c;提供 SQL 语法高亮、自动补全、数据表内容筛选与过滤、连接 Web 数据库、存储历史查询记录等功能。该编辑器支持 SQLite、MySQL、MariaDB、Postgres 等主流数据库&#xff0c;并兼容 Windows、macOS、Linux 等桌面操作系统。 项目地址…

Shader的涉及的数学知识总结

着色器&#xff08;Shader&#xff09;编程广泛应用于计算机图形学中&#xff0c;用于实现各种视觉效果。编写高效的着色器需要扎实的数学基础&#xff0c;以下是着色器编程中常见的数学知识及其应用&#xff1a; 1. 向量代数 向量&#xff1a;表示具有大小和方向的量&#x…

数据结构——排序第三幕(深究快排(非递归实现)、快排的优化、内省排序,排序总结)超详细!!!!

文章目录 前言一、非递归实现快排二、快排的优化版本三、内省排序四、排序算法复杂度以及稳定性的分析总结 前言 继上一篇博客基于递归的方式学习了快速排序和归并排序 今天我们来深究快速排序&#xff0c;使用栈的数据结构非递归实现快排&#xff0c;优化快排&#xff08;三路…

Spring Web开发注解和请求(1)

大家好我是小帅&#xff0c;今天我们来学习Spring Web MVC框架&#xff08;入门级&#xff09; 文章目录 1. 什么是 Spring Web MVC&#xff1f;1.1 MVC 定义1.2 什么是Spring MVC ? 2. 学习Spring MVC2.1 建⽴连接第一个spring MVC程序 3. web开发注解的解释3.1RestControlle…

剖析kubernetes service的IP能否在宿主机中ping通

文章目录 前言一、serviceIP是怎么产生的二、宿主机中ping serviceIP地址1.ping示例2.为什么ping不通剖析2.1.封装及解封装过程2.2.ICMP报文以太网数据帧格式2.3.原因 三、ping不通svcIP是否跟iptables规则有关&#xff1f;四、为什么ipvs的的clusterIP类型的service能够ping通…

vue项目部署到github pages后页面显示不出来??

问题&#xff1a; 当我们在命令行执行 npm run build 后&#xff0c;项目的目录下会生成一个 dist 文件夹&#xff0c;它里面又包含一个 static 文件夹和一个 index.html 文件&#xff0c;这是 webpack 最终打包好的文件 项目上传到仓库后发现页面为空&#xff0c;找不到文件路…

ROS基本框架2——在ROS开发中创建并使用自定义消息(C++版本)

ROS基本框架2——在ROS开发中创建并使用自定义消息(C++版本) code review! 参考笔记 1.ROS基本框架1——编写简单的发布者和订阅者(C++和Python版本) 2.ROS基本框架2——在ROS开发中创建并使用自定义消息(C++版本) 文章目录 ROS基本框架2——在ROS开发中创建并使用自定义…