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 中作出选择，…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
pam_env.so模块配置解析
在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块，负责验证用户身份&am…...
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 （1）输入单引号 （2）万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心，直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法，涵盖基础规则、优化算法和容错机制： 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则： 大尺寸/重量积木在下…...
【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域，专业机构的核心价值不仅在于减轻债务数字，更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明，合法债务优化需同步实现三重平衡： 法律刚性（债…...
【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL
ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...