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 中作出选择，…...
浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
【生成模型】视频生成论文调研
工作清单 上游应用方向：控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好，我是java1234_小锋老师，看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】，分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
安卓基础（Java 和 Gradle 版本）
1. 设置项目的 JDK 版本 方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建
【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...
【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL
ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...