Vue3学习笔记（9.1）
Vue.js style（内联样式）
我们可以在v-bind:style直接设置样式，可以简写:style
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-02 19:41:53* @LastEditors: Mei* @LastEditTime: 2023-04-03 15:41:44* @FilePath: \vscode\Vue3_listen.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!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="vue_doc/vue.global3.js"></script><style>.static{width: 100px;height:100px;background:purple}.active{/* width:100px;height:100px; */background:blue;}.text_danger{background: red;}</style></head>
<body><div id="app"><div :style="{color:activeColor,fontSize:fontSize+'px'}" >基尼太美</div></div><!-- <p id="info"></p> --><script>const app={data(){return{// counter:1// kilometers:0,// meters:0isActive:true,hasError:true,error:null,activeClass:'active',errorClass:'text_danger',activeColor:'red',fontSize:30}}// computed:{// classObject(){// return{// active:this.isActive && !this.error,// 'text-danger':this.error&&this.error.type==='fatal'// }// }// }}Vue.createApp(app).mount('#app')// vm.$watch('kilometers',function(a,b){// document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'// })</script>
</body>
</html>
也可以直接绑定到一个样式对象
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-02 19:41:53* @LastEditors: Mei* @LastEditTime: 2023-04-03 15:45:53* @FilePath: \vscode\Vue3_listen.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!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="vue_doc/vue.global3.js"></script><style>.static{width: 100px;height:100px;background:purple}.active{/* width:100px;height:100px; */background:blue;}.text_danger{background: red;}</style></head>
<body><div id="app"><div :style="styleObject" >基尼太美</div></div><!-- <p id="info"></p> --><script>const app={data(){return{// counter:1// kilometers:0,// meters:0// isActive:true,// hasError:true,// error:null,activeClass:'active',errorClass:'text_danger',styleObject:{color:'purple',fontSize:"30px",}}}// computed:{// classObject(){// return{// active:this.isActive && !this.error,// 'text-danger':this.error&&this.error.type==='fatal'// }// }// }}Vue.createApp(app).mount('#app')// vm.$watch('kilometers',function(a,b){// document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'// })</script>
</body>
</html>
v-bind：style可以使用数组将多个样式对象应用到一个元素上：
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-02 19:41:53* @LastEditors: Mei* @LastEditTime: 2023-04-03 15:49:52* @FilePath: \vscode\Vue3_listen.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!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="vue_doc/vue.global3.js"></script><style>.static{width: 100px;height:100px;background:purple}.active{/* width:100px;height:100px; */background:blue;}.text_danger{background: red;}</style></head>
<body><div id="app"><div :style="[styleObject,secondStyle]" >基尼太美</div></div><!-- <p id="info"></p> --><script>const app={data(){return{// counter:1// kilometers:0,// meters:0// isActive:true,// hasError:true,// error:null,activeClass:'active',errorClass:'text_danger',styleObject:{color:'purple',fontSize:"30px",},secondStyle:{'font-weight':'bold'}}}// computed:{// classObject(){// return{// active:this.isActive && !this.error,// 'text-danger':this.error&&this.error.type==='fatal'// }// }// }}Vue.createApp(app).mount('#app')// vm.$watch('kilometers',function(a,b){// document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'// })</script>
</body>
</html>这样，基尼太美就加粗了。
注意：当v-bind:style使用需要特定前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。
多重值
可以为style绑定中的property提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>这样写只会渲染数组中最后一个被浏览器支持的值。如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display:flex。
组件上使用class属性
当我们在带有单个根元素的自定义组件上使用class属性，这些class将被添加到该元素中。此元素上的现有class将不会被覆盖。
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-02 19:41:53* @LastEditors: Mei* @LastEditTime: 2023-04-03 16:04:54* @FilePath: \vscode\Vue3_listen.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!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="vue_doc/vue.global3.js"></script><style>.static{width: 100px;height:100px;background:purple}.active{/* width:100px;height:100px; */background:blue;}.text_danger{background: red;}</style></head>
<body><div id="app"><!-- <div :style="[styleObject,secondStyle]" >基尼太美</div> --><mez class="classC classD"></mez></div><!-- <p id="info"></p> --><script>const app=Vue.createApp({})app.component('mez',{template:'<h1 class="classA classB">Let is lie</h1>'})app.mount('#app')// vm.$watch('kilometers',function(a,b){// document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'// })</script>
</body>
</html>
对于带数据绑定class也同样适用：
<my-component :class="{active:isActive}"></my-component>当isActive为TRUE时，HTML将被渲染成为：
<p class="active">Hi</p>如果你的组件有多个根元素，你需要定义哪部分将接收这个类。可以使用$attrs组件属性执行此操作：
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-02 19:41:53* @LastEditors: Mei* @LastEditTime: 2023-04-04 08:54:29* @FilePath: \vscode\Vue3_listen.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!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="vue_doc/vue.global3.js"></script><style>.static{width: 100px;height:100px;background:purple}.active{/* width:100px;height:100px; */background:blue;}.text_danger{background: red;}.classA{color:coral;font-size: 30px;}.classB{color:rgb(255, 80, 235);font-size: 30px;}</style></head>
<body><div id="app"><!-- <div :style="[styleObject,secondStyle]" >基尼太美</div> --><mez class="classA"></mez></div><!-- <p id="info"></p> --><script>const app=Vue.createApp({})app.component('mez',{template:`<h1 :class="$attrs.class">Let is lie</h1><span>这是一个子组件</span>`})app.mount('#app')// vm.$watch('kilometers',function(a,b){// document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'// })</script>
</body>
</html>
相关文章：
Vue3学习笔记（9.1）
Vue.js style（内联样式） 我们可以在v-bind:style直接设置样式，可以简写:style <!--* Author: RealRoad1083425287qq.com* Date: 2023-04-02 19:41:53* LastEditors: Mei* LastEditTime: 2023-04-03 15:41:44* FilePath: \vscode\Vue3_li…...
MinIO 环境变量泄漏漏洞（CVE-2023-28432）
漏洞描述 MinIO 是一个开源的对象存储服务器。 MinIO RELEASE.2023-03-20T20-16-18Z之前版本中的 bootstrap-peer-server.go#VerifyHandler 方法存在敏感信息泄漏漏洞，攻击者可向集群部署中的 MinIO 服务器的 /minio/bootstrap/v1/verify API发送POST请求…...
数组转字符串、字符串转数组的方法
一.数组转字符串方法 方法转化后类型用法特点toString()string将数组转换成了一个字符串默认用","隔开toLocaleString()string把数组转换成本地约定的字符串默认用","隔开join()string将数组元素连接起来以构建一个字符串 默认用","隔开 可以随…...
local fault和remote fault
1、什么是 local fault和remote fault? 在IEEE802.3协议中，local fault和remote fault是一种错误序列，在PCS层定义。 MAC RX侧收到local fault时，意味本地链路没有正常建立链路，MAC RX侧收到remote fault时，意味对端没…...
二叉树搜索树 AVL树
文章目录1. 二叉搜索树1.1 二叉搜索树概念1.2 二叉搜索树操作1.3 二叉搜索树的实现1.4 二叉搜索树的应用1.5 二叉搜索树的性能分析2. AVL 树2.1 AVL树的概念2.2 AVL树节点的定义2.3 AVL树的插入2.4 AVL树的旋转2.5 AVL树的验证2.7 AVL树的性能3. 具体代码实现区3.1 二叉搜索树的…...
nginx配置代理多个前端资源
log: 背景 两套不同的前端使用同一个后端服务，前端使用的Nginx代理的dist包 前端 vueelementui 后端 Pythonflask Nginx代理设置 1.进入Linux机器，whereis nginx 查看Nginx安装位置 2.进到Nginx配置文件下 3.vim nginx.conf 通过多个server管理…...
SuperMap iServer下载安装，启用服务，以及发布服务
supermap 是一套专注于 GIS 产品开发的全过程解决方案，主要包括桌面 GIS 、云 GIS 和 Web SDK，这里主要介绍如何使用它的云服务器 iServer 进行三维地图及数据服务的发布，iServer 里面还可进行负载均衡、集群等高级配置，有兴趣的可…...
vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用
vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用安装vxe-table引用使用安装vxe-table vue2稳定版本 vue3稳定版本 npm install xe-utils vxe-tablelegacy安装 vxe-table 依赖的插件 npm i xe-utils引用 我这边是全局引入，可以根据自…...
Vue项目的打包上线步骤
Vue项目的打包上线步骤一、打包之前的路由模式二、性能分析和CDN的应用2.1 性能分析2.2 webpack排除打包2.3 CDN文件配置2.4 注入CDN文件到模板一、打包之前的路由模式 两种路由模式 hash模式 ： #后面是路由路径，特点是前端访问，#后面的变化不…...
都2023了，学习自动化测试还有必要么？会不会浪费我时间
最近收到不少小伙伴私信提问，其中问得比较多的就是“学习自动化测试有那么重要吗？”。 我的回答是肯定的——很重要。 相信不少同学都有诸如此类的疑问，例如：“日常工作中好像用不上自动化？”、“手工点点点好像也可…...
银行数字化转型导师坚鹏：如何有效推进银行数字化转型工作
如何有效推进银行数字化转型工作 ——以推动银行数字化转型战略落地为核心，实现知行果合一课程背景： 很多银行都在开展银行数字化转型工作，目前存在以下问题急需解决：不清楚有效推进银行数字化转型的关键性工作？不…...
【MySQL高级篇】第09章_性能分析工具的使用
第09章_性能分析工具的使用 在数据库调优中，我们的目标是 响应时间更快, 吞吐量更大 。利用宏观的监控工具和微观的日志分析可以帮我们快速找到调优的思路和方式。 1. 数据库服务器的优化步骤 当我们遇到数据库调优问题的时候，该如何思考呢࿱…...
关于xhtml和html的区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别。本文简单介绍什么是XHTML，以及与HTML相比XHTML有什么特点。 1、什么是XHTML？ HTML是一种基本…...
原生JavaScript比较两个日期大小，项目中通用
原生JavaScript比较两个日期大小，项目中通用，具体日期比较大小一、比较两个日期大小（月份）1.开始时间大于结束时间2.开始时间等于结束时间3.开始时间大于结束时间二、比较两个日期大小（日期）代码如下&#…...
【JAVA真的没出路了吗？】
2023年了，转行IT学习Java是不是已经听过看过很多次了。随之而来的类似学Java没出路、Java不行了、对Java感到绝望等等一系列的制造焦虑的话题也在网上层出不穷，席卷了一大片的对行业不了解的吃瓜群众或是正在学习中的人。如果是行外人真的会被这种言论轻…...
PCB模块化设计11——VGA高速PCB布局布线设计规范
目录PCB模块化设计11——VGA高速PCB布局布线设计规范1、什么是VGA？2、VGA接口管脚定义3、VGA电缆究竟是如何工作的？4、VGA参考设计原理图5、PCB设计指南1、R,G,B LAYOUT注意事项2、HSYNC,VSYNC Layout注意事项3、其他注意事项PCB模块化设计11——VGA高速…...
【Python】【进阶篇】五、Python爬虫的抓取网页
目录五、Python爬虫的抓取网页5.1 导入所需模块5.2 获取目标URL地址5.3 向目标URL发送请求5.4 保存为本地文件5.5 优化程序五、Python爬虫的抓取网页 Python 爬虫应用案例：爬取目标的网页，并将其保存到本地。 对要编写的爬虫程序进行分析，可…...
docker安装MongoBD（超详细）
一、安装docker 推荐文章：https://blog.csdn.net/Sumuxi9797926/article/details/127313307?spm1001.2014.3001.5502 二、创建主机挂载配置目录 data目录存放mongodb数据库文件，删除重启容器不会丢失 mkdir -p /docker/mongodb/data && cd …...
6轴陀螺仪姿态解算
之前看过学长姿态解算相关代码，因为要做平衡车的项目，希望陀螺仪处理数据能够达到很好的效果，大概2个星期前，看的学长代码，当时把大部分代码看懂是用来干什么的，但原理还是一窍不通，没办法&…...
提升集群吞吐量与稳定性的秘诀： Dubbo 自适应负载均衡与限流策略实现解析
作者：刘泉禄 整体介绍 本文所说的“柔性服务”主要是指 consumer 端的负载均衡和 provider 端的限流两个功能。在之前的 Dubbo 版本中，负载均衡部分更多的考虑的是公平性原则，即 consumer 端尽可能平等的从 provider 中作出选择，…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
【JVM】- 内存结构
引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...