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 中作出选择，…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）࿰…...
iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...