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 中作出选择，…...
 ViewEngine 深入解析与应用实例)
ASP.NET MVC 1.0 (五) ViewEngine 深入解析与应用实例
一.摘要 本文讲解ViewEngine的作用, 并且深入解析了实现ViewEngine相关的所有接口和类, 最后演示了如何开发一个自定义的ViewEngine. 本系列文章已经全部更新为ASP.NET MVC 1.0版本.希望大家多多支持! 二.承上启下 首先注意: 我会将大家在MVC之前一直使用的ASP.NET页面编程模…...
Swin2SR效果实测：处理含文字区域图像时的可读性保持能力专项测试
Swin2SR效果实测：处理含文字区域图像时的可读性保持能力专项测试 1. 测试背景与目的 在日常工作和生活中，我们经常会遇到一些低分辨率、模糊不清的图片，特别是那些包含文字的图像。无论是扫描的文档、网页截图，还是老照片中的文…...
Qwen3.5-2B部署实操：CentOS 7兼容性处理与依赖库降级方案
Qwen3.5-2B部署实操：CentOS 7兼容性处理与依赖库降级方案 1. 模型简介 Qwen3.5-2B是阿里云推出的轻量化多模态基础模型，属于Qwen3.5系列的小参数版本（20亿参数）。该模型主打低功耗、低门槛部署特性，特别适配端侧和边…...
Winhance中文版：让Windows系统管理不再复杂的全能工具
Winhance中文版：让Windows系统管理不再复杂的全能工具 【免费下载链接】Winhance-zh_CN A Chinese version of Winhance. C# application designed to optimize and customize your Windows experience. 项目地址: https://gitcode.com/gh_mirrors/wi/Winhance-zh…...
保姆级教程：用华为eNSP复现一个能跑通的企业网毕业设计（含VRRP、OSPF、防火墙策略）
华为eNSP企业网实战：从零构建高可用网络架构 刚接触网络工程的学生或初级工程师，面对企业级网络设计时常常陷入配置迷雾——为什么这里要用VRRP？OSPF区域划分的依据是什么？防火墙策略如何与NAT协同工作？本文将以华为eN…...
Wan2.1 VAE与微信小程序开发结合：打造个人AI头像生成工具
Wan2.1 VAE与微信小程序开发结合：打造个人AI头像生成工具 你有没有想过，用一张自己的照片，就能快速生成几十种不同风格的艺术头像？无论是动漫风、油画感，还是赛博朋克，都能一键搞定。以前这可能需要专业的…...
郭老师-我们为什么要爱国？
我们为什么要爱国？ ——因为家在，根在，魂在“你可以不爱你的管家， 但必须爱你家的房子。”🌿 国家如屋，人民为主， 执政者不过管家—— 而这屋，是我们的命脉所系。🏠 一、…...
基于大数据技术的产品评价分析系统设计与实现
前言本研究聚焦于设计与实现一种基于大数据技术的产品评价分析系统，通过构建多层架构体系与融合多元技术方法，为企业决策提供智能化支撑。 研究采用分层架构设计理念，将系统划分为数据采集、存储、处理、分析与展示五大模块。数据采集层综合运…...
AD快捷键避坑指南：为什么你的自定义快捷键总是不生效？
AD快捷键避坑指南：为什么你的自定义快捷键总是不生效？ 在AD（Altium Designer）这个功能强大的电子设计自动化软件中，快捷键是提升工作效率的利器。但很多用户都遇到过这样的困扰：明明按照教程设置了自定义快…...
原创：国家级高端装备卡脖子技术攻关：五轴联动数控系统核心突破方案
国家级高端装备卡脖子技术攻关：五轴联动数控系统核心突破方案 文章摘要 本项目隶属国家高档数控机床与基础制造装备重大专项（04专项），聚焦高端车铣复合车床五轴联动数控系统这一首号卡脖子核心技术，针对该领域海外技术…...