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
在这里插入图片描述

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

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

相关文章

【计算机网络】NAT及Bridge介绍

OSI七层模型 七层模型介绍及举例 为通过网络将人类可读信息通过网络从一台设备传输到另一台设备&#xff0c;必须在发送设备沿 OSI 模型的七层结构向下传输数据&#xff0c;然后在接收端沿七层结构向上传输数据。 数据在 OSI 模型中如何流动 库珀先生想给帕尔梅女士发一封电…

回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循…

LeetCode题解:剑指 Offer 56 - I. 数组中数字出现的次数,哈希表,JavaScript,详细注释

原题链接&#xff1a; https://leetcode.cn/problems/shu-zu-zhong-shu-zi-chu-xian-de-ci-shu-lcof/ 解题思路&#xff1a; 遍历nums&#xff0c;使用Set保存第一次遇到的数字。如果第二次遇到相同数字&#xff0c;将其从Set中删除。最终Set中只会留下2个数字&#xff0c;即…

操作系统启动后网络还需要比较慢的时间才启动(差不多二分钟)

环境 linux 4.14.61 systemd version 247.3 问题 启动时发现网络其实很快就起来了&#xff0c;但是mqtt和docker启动的很慢&#xff0c;导致相关依赖启动很慢。 问题分析 实际通过systemctl list-units发现systemd-networkd-wait-online启动失败 而且从字面上看也有延时…

数据结构和算法

数据结构和算法目录表 CCJava线性结构 1. 数组、单链表和双链表 2. Linux内核中双向链表的经典实现 数组、单链表和双链表 数组、单链表和双链表 栈 栈 栈 队列 队列 队列树形结构 二叉查找树 二叉查找树 二叉查找树 AVL树 AVL树 AVL树 伸展树 伸展树 伸展树 1. 红黑树(一)之…

图解TCP 三次握手和四次挥手的高频面试题(2023最新版)

大家好&#xff0c;最近重新整理了一版 TCP 三次握手和四次挥手的面试题&#xff08;2023最新版&#xff09;。 ----- 任 TCP 虐我千百遍&#xff0c;我仍待 TCP 如初恋。 巨巨巨巨长的提纲&#xff0c;发车&#xff01;发车&#xff01; img TCP 基本认识 TCP 头格式有哪些…

chrony服务器

目录 1.chrony简介 2.chrony安装配置 2.1 chrony安装及配置 非常重要&#xff1a;在配置之前&#xff0c;检查防火墙和selinux是否关闭 3.将chrony配置为其他主机的时间服务器 3.1 修改chrony配置文件 4.chronyc命令 1.chrony简介 chrony 是开源的遵循网络时间协议&…

【Selenimu+AutoIT】非input标签上传文件(带参数)

工具下载 非input标签上传文件&#xff0c;就需要借助第三方工具&#xff0c;如AutoIT。 AutoIT下载 安装步骤略 使用 1.打开Auto Window Info 找到这个打开 拖住红框里面的标到需要定位的地方记录下来 2.打开SciTE Script Editor 打开后&#xff0c;修改为UTF-8&am…

统信UOS安装mysql数据库(mariadb)-统信UOS安装JDK-统信UOS安装nginx(附安装包)

统信UOS离线全套安装教程&#xff08;手把手教程&#xff09; 银河麒麟的各种离线全套安装教程&#xff1a; https://blog.csdn.net/ACCPluzhiqi/article/details/131988147 1.统信UOS桌面系统安装mysql&#xff08;mariadb&#xff09; 2.统信UOS桌面系统安装JDK 3.统信UOS桌…

【K210视觉模块】使用K210视觉模块,点击按键拍摄照片并保存到SD卡(每轮拍照数可调整)(实测可用)

上代码&#xff08;实测可用&#xff09; 1、原理&#xff1a; 为了确保每次拍摄的照片都具有唯一的编号&#xff0c;需要在保存照片之前找到已存在照片文件夹中最大的编号。我定义了一个名为fin_max_num()的函数来实现这个功能。该函数会遍历文件夹中的所有图片文件&#xff…

【iOS】App仿写--天气预报

文章目录 前言一、首页二、搜索界面三、添加界面四、浏览界面总结 前言 最近完成了暑假的最后一个任务——天气预报&#xff0c;特此记录博客总结。根据iPhone中天气App的功能大致可以将仿写的App分为四个界面——首页&#xff0c;搜索界面&#xff0c;添加界面&#xff0c;浏…

PostgreSQL-数据库命令

PostgreSQL-数据库命令 介绍 一个数据库是一个或多个模式的集合,而模式包含表、函数等。因此,完整的逻辑组织结构层次是服务器实例(PostgreSQL Server)、数据库(Database)、模式(Schema)、表(Table),以及某些其他对象(如函数)。一个PostgreSQL服务器实例可以管理…

【NLP概念源和流】 04-过度到RNN(第 4/20 部分)

接上文 【NLP概念源和流】 03-基于计数的嵌入,GloVe(第 3/20 部分) 一、说明 词嵌入使许多NLP任务有了显著的改进。它对单词原理图的理解以及将不同长度的文本表示为固定向量的能力使其在许多复杂的NLP任务中非常受欢迎。大多数机器学习算法可以直接应用于分类和回归任务的…

【vue】 vue2 监听滚动条滚动事件

代码 直接上代码&#xff0c;vue单文件 index.vue <template><div class"content" scroll"onScroll"><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容…

PyTorch - GPU入门教程1

1. 安装GPU版本的PyTorch 登录PyTorch官网https://pytorch.org/&#xff0c;下载对应CUDA版本的PyTorch【不能直接pip install&#xff0c;否则安装上的是CPU版本的】 2. 查看GPU信息 &#xff08;1&#xff09;重要信息 !nvidia-smi我的GPU版本很垃圾&#xff0c;本blog仅…

COMSOL三维多孔介质3D多相材料颗粒夹杂复合材料达西渗流模拟

在实际工程中渗流路径往往不是单一材料&#xff0c;如渗流发生在夹杂碎石的土体中&#xff0c;这就造成渗流的复杂性。这里采用两项材料通过COMSOL达西定律模块对渗流进行模拟。 模型采用CAD随机球体颗粒&过渡区插件建立后导入到COMSOL软件内。 模型包括渗流发生的外侧基…

SOP/详解*和**/python数据结构(iter,list,tuple,dict)/ 解包

一、错误解决合集 1. > combined_seq.named_children() 2. isinstance 2th parameter : must be a type or tuple of types > 改为tuple&#xff0c;不要用列表。改为 LLLayer (nn.Conv2d,nn.Linear) 3. File “test.py”, line 90, in calculate_fin_fout print(“hi”…

实战-单例模式和创建生产者相结合

实际中遇到了这样一个问题&#xff1a; The producer group[xxxx] has been created before, specify another instanceName (like producer.setInstanceName) please. 发生的原因是&#xff1a;一个进程内&#xff0c;创建了多个相同topic的producer。 所以问题就转换成了如何…

非线性弹簧摆的仿真(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

<van-empty description=““ /> 滚动条bug

使用 <van-empty description"" /> 时&#xff0c;图片出现了个滚动条&#xff0c;图片可以上下滑动。 代码如下&#xff1a; <block wx:if"{{courseList.length < 0}}"><van-empty description"" /> </block> <…