当前位置： 首页 > news >正文

Vue16 绑定css样式 style样式

news 文章来源：https://blog.csdn.net/Rockandrollman/article/details/133847583 2025/1/19 11:39:33

绑定样式：

				1. class样式写法:class="xxx" xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2. style样式:style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>绑定样式</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.ata1{background-color: yellowgreen;}.ata2{font-size: 30px;text-shadow:2px 2px 10px red;}.ata3{border-radius: 20px;}</style><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 绑定样式：1. class样式写法:class="xxx" xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2. style样式:style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。--><!-- 准备好一个容器--><div id="root"><!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/><!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 --><div class="basic" :class="classArr">{{name}}</div> <br/><br/><!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --><div class="basic" :class="classObj">{{name}}</div> <br/><br/><!-- 绑定style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div> <br/><br/><!-- 绑定style样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'123',mood:'normal',classArr:['ata1','ata2','ata3'],classObj:{ata1:false,ata2:false,},styleObj:{fontSize: '40px',color:'red',},styleObj2:{backgroundColor:'orange'},styleArr:[{fontSize: '40px',color:'blue',},{backgroundColor:'gray'}]},methods: {changeMood(){const arr = ['happy','sad','normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})</script></html>

相关文章：

Vue16 绑定css样式 style样式

绑定样式&#xff1a; 1. class样式写法:class"xxx" xxx可以是字符串、对象、数组。字符串写法适用于&#xff1a;类名不确定&#xff0c;要动态获取。对象写法适用于&#xff1a;要绑定多个样式&#xff0c;个数不确定&#xff0c;名字也不确定。数组写法适用于&…...

编程日记 2023/10/16 6:46:15

[Spring] SpringMVC 简介（三）

目录 九、SpringMVC 中的 AJAX 请求 1、简单示例 2、RequestBody&#xff08;重点关注“赋值形式”&#xff09; 3、ResponseBody&#xff08;经常用&#xff09; 4、为什么不用手动接收 JSON 字符串、转换 JSON 字符串 5、RestController 十、文件上传与下载 1、Respo…...

编程日记 2023/10/16 6:45:13

kettle应用-从数据库抽取数据到excel

本文介绍使用kettle从postgresql数据库中抽取数据到excel中。 首先&#xff0c;启动kettle 如果kettle部署在windows系统&#xff0c;双击运行spoon.bat或者在命令行运行spoon.bat 如果kettle部署在linux系统&#xff0c;需要执行如下命令启动 chmod x spoon.sh nohup ./sp…...

编程日记 2023/10/16 6:44:12

Git Commit Message规范

概述 Git commit message规范是一种良好的实践&#xff0c;可以帮助开发团队更好地理解和维护代码库的历史记录。它可以提高代码质量、可读性和可维护性。下面是一种常见的Git commit message规范&#xff0c;通常被称为"Conventional Commits"规范&#xff1a; 一…...

编程日记 2023/10/16 6:43:11

Linux网络编程系列之UDP广播

Linux网络编程系列 &#xff08;够吃&#xff0c;管饱&#xff09; 1、Linux网络编程系列之网络编程基础 2、Linux网络编程系列之TCP协议编程 3、Linux网络编程系列之UDP协议编程 4、Linux网络编程系列之UDP广播 5、Linux网络编程系列之UDP组播 6、Linux网络编程系列之服务器编…...

编程日记 2023/10/16 6:42:09

spring中事务相关面试题（自用）

1 什么是spring事务 Spring事务管理的实现原理是基于AOP&#xff08;面向切面编程&#xff09;和代理模式。Spring提供了两种主要的方式来管理事务&#xff1a;编程式事务管理和声明式事务管理。 声明式事务管理&#xff1a; Spring的声明式事务管理是通过使用注解或XML配置来…...

编程日记 2023/10/16 6:41:08

09 | JpaSpecificationExecutor 解决了哪些问题

QueryByExampleExecutor用法 QueryByExampleExecutor&#xff08;QBE&#xff09;是一种用户友好的查询技术&#xff0c;具有简单的接口&#xff0c;它允许动态查询创建&#xff0c;并且不需要编写包含字段名称的查询。 下面是一个 UML 图&#xff0c;你可以看到 QueryByExam…...

编程日记 2023/10/16 6:40:06

Linux命令(93)之su

linux命令之su 1.su介绍 linux命令su用于变更为其它使用者的身份&#xff0c;如root用户外&#xff0c;需要输入使用者的密码 2.su用法 su [参数] user su参数 参数说明-c <command>执行指定的命令&#xff0c;然后切换回原用户-切换到目标用户的环境变量 3.实例 3…...

编程日记 2023/10/16 6:39:05

1.HTML-HTML解决中文乱码问题

题记 下面是html文件解决中文乱码的方法 方法一 在 HTML 文件的 <head> 标签中添加 <meta charset"UTF-8">&#xff0c;确保文件以 UTF-8 编码保存 <head> <meta charset"UTF-8"> <!-- 其他标签和内容 --> </head> --…...

编程日记 2023/10/16 6:38:05

Vue3 + Nodejs 实战 ，文件上传项目--实现拖拽上传

目录 1.拖拽上传的剖析 input的file默认拖动 让其他的盒子成为拖拽对象 2.处理文件的上传 处理数据 上传文件的函数 兼顾点击事件 渲染已处理过的文件 测试效果 3.总结 博客主页&#xff1a;専心_前端,javascript,mysql-CSDN博客 系列专栏&#xff1a;vue3nodejs 实战-…...

编程日记 2023/10/16 6:37:04

Windows：VS Code IDE安装ESP-IDF【保姆级】

物联网开发学习笔记——目录索引 参考&#xff1a; VS Code官网&#xff1a;Visual Studio Code - Code Editing. Redefined 乐鑫官网&#xff1a;ESP-IDF 编程指南 - ESP32 VSCode ESP-ID Extension Install 一、前提条件 Visual Studio Code IDE安装ESP-IDF扩展&#xf…...

编程日记 2023/10/16 6:36:03

Hadoop3教程（十一）：MapReduce的详细工作流程

文章目录 &#xff08;94&#xff09;MR工作流程Map阶段Reduce阶段 参考文献 &#xff08;94&#xff09;MR工作流程 本小节将展示一下整个MapReduce的全工作流程。 Map阶段 首先是Map阶段&#xff1a; 首先&#xff0c;我们有一个待处理文本文件的集合&#xff1b; 客户端…...

编程日记 2023/10/16 6:35:02

测试中Android与IOS分别关注的点

目录 1、自身不同点 2、测试注重点 3、其他测试点 主要从本身系统的不同点、系统造成的不同点、和注意的测试点做总结 1、自身不同点 研发商&#xff1a;Adroid是google公司做的手机系统&#xff0c;IOS是苹果公司做的手机系统 　　开源程度&#xff1a;Android是开源的&a…...

编程日记 2023/10/16 6:34:01

NLG（自然语言生成）评估指标介绍

诸神缄默不语-个人CSDN博文目录 本文介绍自然语言生成任务中的各种评估指标。 因为我是之前做文本摘要才接触到这一部分内容的&#xff0c;所以本文也是文本摘要中心。 持续更新。 文章目录 1. 常用术语2. ROUGE (Recall Oriented Understudy for Gisting Evaluation)1. 计算…...

编程日记 2023/10/16 6:33:00

苍穹外卖(七) Spring Task 完成订单状态定时处理

Spring Task 完成订单状态定时处理, 如处理支付超时订单 Spring Task介绍 Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 应用场景: 信用卡每月还款提醒 火车票售票系统处理未支付订单 入职纪念日为用户发送通知 点外…...

编程日记 2023/10/16 6:30:57

【探索Linux】—— 强大的命令行工具 P.11（基础IO，文件操作）

阅读导航 前言一、C语言的文件操作二、C的文件操作三、Linux系统文件操作&#xff08;I/O接口&#xff09;1. open()⭕传入多个打开方式&#xff08;按位或操作将不同的标志位组合在一起&#xff09; 2. write()3. read()4. close()5. lseek() 温馨提示 前言 前面我们讲了C语言…...

编程日记 2023/10/16 6:29:56

前端练习项目(附带页面psd图片及react源代码)

一、前言 相信很多学完前端的小伙伴都想找个前端项目练练手&#xff0c;检测自己的学习成果。但是现在很多项目市面上都烂大街了。今天给大家推荐一个全新的项目——电子校园 项目位置&#xff1a;https://github.com/v5201314/eSchool 二、项目介绍(部分页面展示)&#xff…...

编程日记 2023/10/16 6:28:55

【从零开始学习Redis | 第三篇】在Java中操作Redis

前言&#xff1a; 本文算是一期番外&#xff0c;介绍一下如何在Java中使用Reids &#xff0c;而其实基于Java我们有很多的开源框架可以用来操作redis&#xff0c;而我们今天选择介绍的是其中比较常用的一款&#xff1a;Spring Data Redis 目录 前言&#xff1a; Spring Data…...

编程日记 2023/10/16 6:27:54

vim、gcc/g++、make/Makefile、yum、gdb

vim、gcc/g、make/Makefile、yum、gdb 一、Linux编辑器vim1、简介2、三种模式的概念&#xff08;1&#xff09;正常/普通/命令模式(Normal mode)&#xff08;2&#xff09;插入模式(Insert mode)&#xff08;3&#xff09;末行/底行模式(last line mode) 3、三种模式的切换4、正…...

编程日记 2023/10/16 6:26:52

2022最新版-李宏毅机器学习深度学习课程-P13 局部最小值与鞍点

一、优化失败的原因 局部最小值&#xff1f;鞍点&#xff1f; 二、数学推导分析 用泰勒公式展开 一项与梯度&#xff08;L的一阶导&#xff09;有关&#xff0c;一项与海赛矩阵&#xff08;L的二阶导&#xff09;有关 海瑟矩阵 VTHV通过海瑟矩阵的性质可以转为判断H是否是正…...

编程日记 2023/10/16 6:25:51

ARM架构的基本知识

ARM两种授权 体系结构授权, 一种硬件规范, 用来约定指令集, 芯片内部体系结构(内存管理, 高速缓存管理), 只约定每一条指令的格式, 行为规范, 参数, 客户根据这个规范自行设计与之兼容的处理器处理IP授权, ARM公司根据某个版本的体系结构设计处理器, 再把处理器设计方案授权给…...

编程日记 2023/10/16 6:23:48

网络安全（黑客技术）——如何高效自学

前言 前几天发布了一篇 网络安全&#xff08;黑客&#xff09;自学 没想到收到了许多人的私信想要学习网安黑客技术&#xff01;却不知道从哪里开始学起&#xff01;怎么学&#xff1f;如何学&#xff1f; 今天给大家分享一下&#xff0c;很多人上来就说想学习黑客&#xff0c…...

编程日记 2023/10/16 6:22:48

云原生场景下高可用架构的最佳实践

作者&#xff1a;刘佳旭&#xff08;花名&#xff1a;佳旭&#xff09;&#xff0c;阿里云容器服务技术专家 引言 随着云原生技术的快速发展以及在企业 IT 领域的深入应用&#xff0c;云原生场景下的高可用架构&#xff0c;对于企业服务的可用性、稳定性、安全性越发重要。通…...

编程日记 2023/10/16 6:20:45

图论-最短路径算法-弗洛伊德算法与迪杰斯特拉算法

弗洛伊德算法&#xff1a; 弗洛伊德算法本质是动态规划&#xff0c;通过添加点进如可选择的点组成的集合的同时更新所有点之间的距离&#xff0c;从而得到每两个点之间的最短距离。 初始化&#xff1a; 创建一个二维数组 dist&#xff0c;其中 dist[i][j] 表示从节点 i 到节点…...

编程日记 2023/10/16 6:19:44

[23] IPDreamer: Appearance-Controllable 3D Object Generation with Image Prompts

pdf Text-to-3D任务中&#xff0c;对3D模型外观的控制不强&#xff0c;本文提出IPDreamer来解决该问题。在NeRF Training阶段&#xff0c;IPDreamer根据文本用ControlNet生成参考图&#xff0c;并将参考图作为Zero 1-to-3的控制条件&#xff0c;用基于Zero 1-to-3的SDS损失生成…...

编程日记 2023/10/16 6:18:43

深入理解React中的useEffect钩子函数

引言&#xff1a; React是一种流行的JavaScript库&#xff0c;它通过组件化和声明式编程的方式简化了前端开发。在React中&#xff0c;一个核心概念是组件的生命周期&#xff0c;其中包含了许多钩子函数&#xff0c;用于管理组件的不同阶段。其中之一就是useEffect钩子函数&…...

编程日记 2023/10/16 6:17:42

数字化时代的财务管理：挑战与机遇

导语&#xff1a;随着数字化技术的不断发展&#xff0c;财务管理正面临着前所未有的挑战和机遇。数字化不仅改变了财务数据的收集、处理和分析方式&#xff0c;还为财务决策提供了更多的依据和方向。本文将探讨数字化时代财务管理的新特点&#xff0c;以及如何利用数字化技术提…...

编程日记 2023/10/16 6:16:41

网络通信协议-HTTP、WebSocket、MQTT的比较与应用

在今天的数字化世界中&#xff0c;各种通信协议起着关键的作用&#xff0c;以确保信息的传递和交换。HTTP、WebSocket 和 MQTT 是三种常用的网络通信协议&#xff0c;它们各自适用于不同的应用场景。本文将比较这三种协议&#xff0c;并探讨它们的主要应用领域。 HTTP&#xff…...

编程日记 2023/10/16 6:15:40

【深度学习】深度学习实验四——循环神经网络（RNN）、dataloader、长短期记忆网络（LSTM）、门控循环单元（GRU）、超参数对比

一、实验内容 实验内容包含要进行什么实验，实验的目的是什么，实验用到的算法及其原理的简单介绍。 1.1 循环神经网络 （1）理解序列数据处理方法，补全面向对象编程中的缺失代码，并使用torch自带数据工具将数据封装为dataloader。 （2）分别采用手动方式以及调用接口方式…...

编程日记 2023/10/16 6:14:39

DB2分区表详解

一、分区表基本概念 当表中的数据量不断增大，查询数据的速度就会变慢，应用程序的性能就会下降，这时就应该考虑对表进行分区。分区后的表称为分区表。 表进行分区后，逻辑上表仍然是一张完整的表，只是将表中的数据在物理上存放到多个“表空间”(物理文件上)，这样查询数据时…...

编程日记 2023/10/16 6:13:38

山西建设网官方网站/网址最全的浏览器

学过Linux或者Java的应该都知道线程的概念&#xff0c;C#也支持通过多个线程来并行执行任务。任何一个C#的程序会开始于一个单线程&#xff08;由CLR和OS自动创建的主线程&#xff09;。 下面是简单的例子&#xff1a; 1 using System;2 using System.Threading;3 4 namespace …...

编程日记 2025/1/19 6:51:21

买了域名如何做网站/seo优化教程自学

2019独角兽企业重金招聘Python工程师标准>>> select (case when instr (x,a)>0 or instr (x,b)>0 or instr (x,c)>0 then 1 else 0 end) from r 转载于:https://my.oschina.net/youfen/blog/1934809...

编程日记 2025/1/19 6:21:00

网站首页置顶是怎么做/免费网站排名优化在线

阅读本文大概需要 10 分钟。Docker是一个不断发展的系统&#xff0c;开发人员积极改进使用和性能。所以命令总是在变化。docker一些老的命令经常被弃用&#xff0c;并被新的或更有效的命令取代。您可以使用帮助选项检查Docker安装上的最新可用命令&#xff1a;$ docker --help…...

编程日记 2025/1/19 6:18:58

xampp里wordpress安装教程/西安seo工作室

阅读本文前&#xff0c;请您先点击上面的蓝色字体&#xff0c;再点击“关注”&#xff0c;这样您就可以继续免费收到文章了。每天都有分享&#xff0c;完全是免费订阅&#xff0c;请放心关注。文字及图片来源于网络&#xff0c;侵权删。 …...

编程日记 2025/1/19 4:21:38

湖南湘信建设工程有限公司网站/sem论坛

在大量的面试中&#xff0c;红黑树包括某种AVL树 这些概念只会用即可&#xff0c;代码细节可以不做要求&#xff0c;要知道原理。 搜索二叉树 搜索二叉树的定义&#xff1a;对于一棵二叉树中的任意子树&#xff0c;其左子树上的所有数值小于头结点的数值&#xff0c;其右子树…...

编程日记 2025/1/19 1:27:46

湖北省建设厅网站杨凯/济南seo优化公司助力网站腾飞

可以&#xff0c;但是即使你写了这个类&#xff0c;也没有用。这个问题涉及到加载器的委托机制&#xff0c;在类加载器的结构图&#xff08;在下面&#xff09;中&#xff0c;BootStrap是顶层父类&#xff0c;ExtClassLoader是BootStrap类的子类&#xff0c;ExtClassLoader又是…...

编程日记 2025/1/18 20:05:51