vue 新学习 04 css样式绑定,渲染,key的重要意义

之前的html文件如何去绑定css样式?
01.首先在html文件中,在<head>标签中,用<style>中去写样式,通过html标签(每一个标签都有这样子的属性)中的class或者是id属性来完成<style>中的描绘的样式的用。
例子:
先去写样式<style>,.basic就是用class选择器(此处的意思是class属性值是basic),id选择器是#
在这里插入图片描述
同时用多个样式,就是一起用,只是用空格来隔开。
在这里插入图片描述
这个是传统的在html文件中用css样式。

那么如何在vue中去绑定样式?
用class或者id来获取样式:
01.首先css样式还是要去写的,也就是还需要在头部标签head中去写,这边不改变。
在这里插入图片描述

02.在vue实例中的data中key值去写字段。这里的字段就是<style>中的写的class类选择器的名字。例如:data中的自定义的key 值是(mood)
在这里插入图片描述

03.在html标签中去用v-bind来绑定mood字段
在这里插入图片描述
04.此外可以用一个事件来完成样式名称的改变。
在这里插入图片描述
class属性的进一步的优化(数组包装,对象包装),这里的修改字段在浏览器中去完成的。
在这里插入图片描述
在这里插入图片描述

结果:
在这里插入图片描述

用标签的style属性来完成
之前的html文件中标签用style属性,直接写样式。
例如:

在这里插入图片描述
在vue中,由于style是一个内部存在多个键值对的一个属性。一般就把style的许多字段写在一个对象(在data中)。
在这里插入图片描述

多个style
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

语义分割文献整理

2014年文献 1.论文题目《Semantic Image Segmentation with Deep Convolutional Nets and Fully Connected CRFs》 1.1.网络别名《DeepLabV1》 1.2.论文引用 Chen L C, Papandreou G, Kokkinos I, et al. Semantic image segmentation with deep convolutional nets and ful…

通过 CCIP 构建跨链应用(5 个案例)

Chainlink 的跨链互操作性协议&#xff08;CCIP&#xff09;是一种新的通用跨链通信协议&#xff0c;为智能合约开发人员提供了以最小化信任的方式在区块链网络之间传输数据和通证的能力。 目前&#xff0c;部署在多个区块链上的应用程序面临着资产、流动性和用户的碎片化问题…

【电源专题】电压查表法显示电量的原理与缺点

在文章:【电源专题】电量计估计电池荷电状态方法(开路电压法及库仑计法)的差别中我们讲到电量计估计荷电状态的方法。其中开路电压法实现方法较容易,可借着开路电压对应荷电状态查表而得到。 那么为什么能够使用电压查表法去预估电池容量呢?如下所示如果我们往一个有刻度…

LLM大模型——langchain相关知识总结

目录 一、简介LangChain的主要价值支柱简单安装 二、 LangChain的主要模块1.Model I/Oprompt模版定义调用语言模型 2. 数据连接3. chains4. Agents5. MemoryCallbacks 三、其他记录多进程调用 主要参考以下开源文档 文档地址&#xff1a;https://python.langchain.com/en/lates…

小白到运维工程师自学之路 第六十二集 (docker持久化与数据卷容器)

一、概述 Docker持久化是指将容器中的数据持久保存在主机上&#xff0c;以便在容器重新启动或迁移时不丢失数据。由于Docker容器是临时和可变的&#xff0c;它们的文件系统默认是易失的&#xff0c;这意味着容器中的任何更改或创建的文件都只存在于此容器的生命周期内。但是&a…

LVDS端口ESD静电放电保护电路图(经典)

Low Voltage Differential Signaling&#xff08;LVDS&#xff09;是一种低压差分信号技术接口&#xff0c;是美国NS公司为克服以TTL电平方式传输宽带高码率数据时功耗大、EMI电磁干扰大等缺点而研制的一种数字视频信号传输方式。LVDS端口电路包括两部分&#xff1a;驱动板侧的…

3DEXPERIENCE用户角色 | Structural Mechanics Engineer 结构力学工程师

真实条件下实施复杂的线性和非线性分析 直观验证设计并更快地做出产品决策 Structural Mechanics Engineer 在基于云的 3DEXPERIENCE 平台上构建&#xff0c;您可对产品行为执行结构线性和非线性静态、低速和高速动态和热仿真。具备材料校准功能&#xff0c;有助于确保材料行为…

十分钟python入门 日期时间

1.Python 日期 Python 中的日期不是其自身的数据类型&#xff0c;但是我们可以导入名为 datetime 的模块&#xff0c;把日期视作日期对象进行处理。 1.1 导入 datetime 模块并显示当前日期&#xff1a; import datetime#导入 datetime 模块并显示当前日期&#xff1a; x da…

微信小程序接入腾讯云天御验证码

腾讯云新一代行为验证码&#xff08;Captcha&#xff09;&#xff0c;基于十道安全防护策略&#xff0c;为网页、APP、小程序开发者打造立体、全面的人机验证。在保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时&#xff0c;提供更精细化的用户体验。 …

在使用Python爬虫时遇到503 Service Unavailable错误解决办法汇总

在进行Python爬虫的过程中&#xff0c;有时会遇到503 Service Unavailable错误&#xff0c;这意味着所请求的服务不可用&#xff0c;无法获取所需的数据。为了解决这个常见的问题&#xff0c;本文将提供一些解决办法&#xff0c;希望能提供实战价值&#xff0c;让爬虫任务顺利完…

【问题随记】

ubuntu 14.04源更新(sources.list) deb http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ trusty-security main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ trusty-update…

MyBatis的使用方法

文章目录 一、MyBatis的创建准备工作 二、MyBatis的使用1.项目分层2.业务代码1&#xff09;使用XML的方法2&#xff09;直接使用注解 总结 一、MyBatis的创建 准备工作 1.添加依赖 旧项目 方法一&#xff1a;在pom.xml中添加MyBatis和MySQL Diver依赖 <!-- 添加 MyBati…

【Android】在AndroidStudio开发工具运行Java程序

在Android Studio开发工具中&#xff0c;Android系统开始就是用java语言开发的&#xff0c;还可以java代码来写程序&#xff0c;控制台&#xff0c;桌面应用&#xff0c;还可以写可调用的模块&#xff0c;这里讲一下创建Java程序步骤&#xff0c;方便入门java语言开发。 新建一…

批处理文件的@echo off是什么意思?

echo off 关闭回显 echo on 打开回显 echo off并不是DOS程序中的&#xff0c; 而是DOS批处理中的。 当年的DOS&#xff0c;所有操作都用键盘命令来完成&#xff0c; 当你每次都要输入相同的命令时&#xff0c; 可以把这么多命令存为一个批处理&#xff0c; 从此以后&#xff…

[Docker实现测试部署CI/CD----自由风格的CI操作[中间架构](4)]

10、自由风格的CI操作&#xff08;中间架构&#xff09; 中间架构图 创建web项目 创建一个 web 项目&#xff0c;就使用简单的 spring boot 工程&#xff0c;例如工程名为 hellojks。仅需导 入 spring web 依赖即可。 import org.springframework.web.bind.annotation.GetMapp…

轮足机器人硬件总结

简介 本文主要根据“轮腿机器人Hyun”总结的硬件部分。 轮腿机器人Hyun开源地址&#xff1a;https://github.com/HuGuoXuang/Hyun 1 电源部分 1.1 78M05 78M05是一款三端稳压器芯片&#xff0c;它可以将输入电压稳定输出为5V直流电压. 1.2 AMS1117-3.3 AMS1117-3.3是一种输…

Maven里面没有plugins dependence问题解决

说明&#xff1a;今天在做Nacos、Dubbo整合的时候&#xff0c;在父模块中做了版本限制&#xff0c;出错后就又把版本控制什么都删掉&#xff0c;回退到最开始的状态&#xff0c;此时父模块下面的服务右侧的 maven里面没有plugins dependence &#xff0c;然后项目全都报错。 问…

液冷数据中心规模化扩张在即,曙光数科发布“冷平衡”战略

出品 | CSDN 云计算 随着数字化深入&#xff0c;AI应用爆发&#xff0c;我国算力需求持续增长。面对服务器密度、双碳目标、降本增效的多重考量&#xff0c;平衡数据中心性能、功耗、成本的三元关系&#xff0c;成为摆在每个数据中心面前的难题&#xff0c;为此数据中心将目光转…

【C++】STL——set和map及multiset和multiset的介绍及使用

&#x1f680; 作者简介&#xff1a;一名在后端领域学习&#xff0c;并渴望能够学有所成的追梦人。 &#x1f681; 个人主页&#xff1a;不 良 &#x1f525; 系列专栏&#xff1a;&#x1f6f8;C &#x1f6f9;Linux &#x1f4d5; 学习格言&#xff1a;博观而约取&#xff0…

k8s概念-StatefulSet

StatefulSet 是用来管理有状态应用的控制器 StatefulSet 用来管理某Pod集合的部署和扩缩&#xff0c; 并为这些 Pod 提供持久存储和持久标识符StatefulSet | KubernetesStatefulSet 运行一组 Pod&#xff0c;并为每个 Pod 保留一个稳定的标识。 这可用于管理需要持久化存储或稳…