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蛇群算法优化卷积门控循…

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

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

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

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

【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桌…

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

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

【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”…

非线性弹簧摆的仿真(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> <…

教你使用Pyinstaller将Python源码打包成可执行程序exe的方法

pyinstaller是一个常用的Python打包工具&#xff0c;可以将Python程序打包成独立的可执行文件&#xff0c;支持Windows、Linux和macOS等平台。 ★★★Pyinstaller有许多参数&#xff0c;以下是其中一些主要参数的含义&#xff1a; -F, --onefile&#xff1a;打包一个单个文件…

项目管理困扰?这里有个6W3H解决方案

引言 在项目管理的过程中&#xff0c;我们经常面临各种各样的挑战和问题。例如&#xff0c;如何确定项目的目标&#xff1f;如何分配资源&#xff1f;何时开始执行项目&#xff1f;在哪里进行项目&#xff1f;这些问题如果没有得到正确的解答&#xff0c;将会严重影响项目的进…

【C++】初阶 --- 引用(超级详细版!!!)

文章目录 &#x1f36a;一、引用的概念&#x1f36a;二、引用的特性&#x1f37f;1、引用在定义时必须初始化&#x1f37f;2、一个变量可以有多个引用&#x1f37f;3、引用一旦引用一个实体&#xff0c;再不能引用其他实体 &#x1f36a;三、常引用(被const 修饰的引用)&#x…

Flink读取mysql数据库(java)

代码如下: package com.weilanaoli.ruge.vlink.flink;import com.ververica.cdc.connectors.mysql.source.MySqlSource; import com.ververica.cdc.connectors.mysql.table.StartupOptions; import com.ververica.cdc.debezium.JsonDebeziumDeserializationSchema; import org…

Excel修改日期格式,改变日期的筛选方式

我们有两列日期数据&#xff1a; 左边这一列筛选会显示&#xff1a; 右边这一列筛选会显示&#xff1a; 修改格式&#xff0c;将【日期1】改为【日期2】 将【日期1】的格式修改为文本格式即可 修改格式&#xff0c;将【日期2】改为【日期1】 选中日期2&#xff0c;点击【数据…

JDK各版本重要变革

各版本更新详情 JDK8(LTS)--2014/3 语法层面 lambda表达式(重要特色之一) 一种特殊的匿名内部类,语法更加简洁允许把函数作为一个方法的参数,将代码象数据一样传递&#xff0c;即将函数作为方法参数传递基本语法: <函数式接口> <变量名> (参数...) -> { 方法…