当前位置：首页 > news >正文

Vue3样式绑定

news 2025/12/15 16:18:20

文章目录

Vue3样式绑定
- 1. class 属性绑定
- - 1.1 v-bind:class 设置一个对象，从而动态的切换 class
  - 1.2 在对象中传入更多属性用来动态切换多个 class
  - 1.3 直接绑定数据里的一个对象
  - 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
  - 1. 5 数据语法
  - 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
- 2. Vue.js style(内联样式)
- - 2.1 v-bind:style 直接设置样式
  - 2.2 直接绑定到一个样式对象
  - 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
  - 2.4 多重值
- 3. 组件上使用 class 属性
- - 3.1 带有单个根元素的自定义组件上使用 class 属性
  - 3.2 组件有多个根元素

Vue3样式绑定

1. class 属性绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时，表达式除了可以使用字符串之外，还可以是对象或数组。

v-bind:class 可以简写为 :class。

1.1 v-bind:class 设置一个对象，从而动态的切换 class

实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:class 设置一个对象，从而动态的切换 class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式--><style>.active {width: 100px;height: 100px;background: green;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class --><div :class="{'active': isActive}"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: true}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

以上实例 div class 渲染结果为：
```
<div class="active"></div>
```

1.2 在对象中传入更多属性用来动态切换多个 class

:class 指令也可以与普通的 class 属性共存

实例：text-danger 类背景颜色覆盖了 active 类的背景色：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class --><div :class="{'active': isActive, 'text-danger': hasError}" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: false,hasError: true}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

以上实例 div class 渲染结果为：
```
<div class="text-danger static"></div>
```
当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 "static active text-danger"。

1.3 直接绑定数据里的一个对象

text-danger 类背景颜色覆盖了 active 类的背景色

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 直接绑定数据里的一个对象</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     返回类型为一个对象classObject: {// isActive为false则不显示// isActive: true,'active': false,'text-danger': true}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

以上实例 div class 渲染结果为：
```
<div class="text-danger static"></div>
```
- 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 "static active text-danger"。

在这里插入图片描述

1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式

也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 绑定一个返回对象的计算属性。这是一个常用且强大的模式</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值isActive: true,error: null}},//     定义计算属性 为一个对象computed: {classObject () {// 定义对象返回值return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

以上代码的渲染结果为：
```
<div class="active static"></div>
```

1. 5 数据语法

可以把一个数组传给 v-bind:class，实例如下:

<div :class="[activeClass, errorClass]" class="static"></div>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 可以把一个数组传给 v-bind:class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[activeClass, errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值activeClass: 'active',errorClass: 'text-danger'}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

以上代码渲染结果：<div class="active text-danger static"></div>

1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[isActive ? activeClass : errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值isActive: true,activeClass: 'active',errorClass: 'text-danger'}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：isActive为true显示绿色，isActive为false显示红色
在这里插入图片描述

以上实例的渲染结果:<div class="active static"></div>

2. Vue.js style(内联样式)

2.1 v-bind:style 直接设置样式

可以在 v-bind:style 直接设置样式，可以简写为 :style

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {activeColor: 'red',fontSize: 30}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

以上代码渲染结果为:<div style="color: red; font-size: 30px;">v-bind:style 直接设置样式</div>

2.2 直接绑定到一个样式对象

也可以直接绑定到一个样式对象，让模板更清晰：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="styleObject">v-bind:style 绑定样式对象</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     设置返回结果为一个样式对象styleObject: {color: "red",fontSize: "30px"}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

以上代码的渲染结果：<div style="color: red; font-size: 30px;">v-bind:style 绑定样式对象</div>

2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上

v-bind:style 可以使用数组将多个样式对象应用到一个元素上

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 可以使用数组将多个样式对象应用到一个元素上 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="[baseStyles, overridingStyle]">v-bind:style 绑定样式对象</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     设置返回结果为一个样式对象baseStyles: {color: "green",fontSize: "30px"},overridingStyle: {'font-weight': 'bold'}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

在这里插入图片描述

上述案例渲染结果：<div style="color: green; font-size: 30px; font-weight: bold;">v-bind:style 绑定样式对象</div>
注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

2.4 多重值

可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值
```
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
```
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

3. 组件上使用 class 属性

3.1 带有单个根元素的自定义组件上使用 class 属性

当在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用自定义的全局组件runoob--><runoob class="classC classD"></runoob></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})//     在HelloVueApp组件上创建一个新全局组件
// 在自定义组件上使用class属性，这些属性会被添加到该元素上HelloVueApp.component('runoob', {template: '<h1 class="classA classB">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>'})//     创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

在这里插入图片描述
以上实例渲染结果：<h1 class="classA classB classC classD">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>

对于带数据绑定 class 也同样适用：

<my-component :class="{ active: isActive }"></my-component>

当 isActive 为 true 时，HTML 将被渲染成为：
```
<p class="active">Hi</p>
```

3.2 组件有多个根元素

组件有多个根元素，需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作

template 中 ` 是反引号，不是单引号 ’

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用自定义的全局组件runoob--><runoob class="classA"></runoob></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})//     在HelloVueApp组件上创建一个新全局组件 含多个根元素HelloVueApp.component('runoob', {template: `<p :class="$attrs.class">组件有多个根元素 使用 $attrs 组件属性执行此操作</p><span>这是runoob的子组件</span>`})//     创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述

以上代码渲染结果：

<p class="classA">组件有多个根元素 使用 $attrs 组件属性执行此操作</p>
<span>这是runoob的子组件</span>

在这里插入图片描述

Vue3样式绑定

文章目录 Vue3样式绑定1. class 属性绑定1.1 v-bind:class 设置一个对象，从而动态的切换 class1.2 在对象中传入更多属性用来动态切换多个 class1.3 直接绑定数据里的一个对象1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式1. 5 数据语法1.6 errorClass…...

编程日记 2023/9/15 1:00:58

【深度学习】 Python 和 NumPy 系列教程（廿二）：Matplotlib详解：2、3d绘图类型（8）3D饼图（3D Pie Chart）

一、前言 Python是一种高级编程语言，由Guido van Rossum于1991年创建。它以简洁、易读的语法而闻名，并且具有强大的功能和广泛的应用领域。Python具有丰富的标准库和第三方库，可以用于开发各种类型的应用程序，包括Web开发、数据分…...

编程日记 2023/9/15 0:56:54

数仓主题域和数据域、雪花模型，星型模型和星座模型

数仓模型和领域划分一、主题域和数据域的差别二、雪花模型，星座模型和星型模型一、主题域和数据域的差别明确数据域作为数仓搭建的重要一环，能够让数仓的数据便于管理和应用。数据域和主题域都是数据仓库中的重要概念，但含义略有不同&am…...

编程日记 2023/9/15 0:55:54

黑马头条热点文章实时计算、kafkaStream

热点文章-实时计算 1 今日内容 1.1 定时计算与实时计算 1.2 今日内容 kafkaStream 什么是流式计算kafkaStream概述kafkaStream入门案例Springboot集成kafkaStream 实时计算用户行为发送消息kafkaStream聚合处理消息更新文章行为数量替换热点文章数据 2 实时流式计算 2…...

编程日记 2023/9/15 0:50:48

数据分析：利用gpt进行归因分析

prompt： 你是某电商平台的一名数据分析师，发现昨日的GMV环比下降了5%，请对这数据变动做出归因。 output： 在电商行业中，GMV（总销售额）是一个非常重要的指标，用于衡量业务的整体健康…...

编程日记 2023/9/15 0:49:47

Python工程师Java之路（p）Module和Package

文章目录 1、Python的Module和Package2、Java的Module和Package2.1、Module2.1.1、分模块开发意义2.1.2、模块的调用 2.2、Package Module通常译作模块，Package通常译作包 1、Python的Module和Package Python模块（Module）：1个以.…...

编程日记 2023/9/15 0:45:43

某计费管理系统任意文件读取漏洞

文章目录声明一、漏洞描述二、漏洞复现声明请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失，均由使用者本人负责，所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。一、漏洞描述蓝海…...

编程日记 2023/9/15 0:42:41

LeetCode:1929.数组串联

1929. 数组串联来源：力扣（LeetCode）链接: https://leetcode.cn/problems/concatenation-of-array/description/ 给你一个长度为 n 的整数数组 nums 。请你构建一个长度为 2n 的答案数组 ans ，数组下标从 0 开始计数，对于所有 0 < = i < n 0 <= i < n …...

编程日记 2023/9/15 0:41:40

记录：移动设备软件开发（activity组件）

目录前言Android简介和发展Android应用的基本组件介绍Activity组件Activity简介Activity的状态和生命周期小结前言移动设备软件开发是指为智能手机、平板电脑等移动设备设计和开发应用程序的过程。移动设备软件开发涉及多种技术、平台和工具，例如Android、iOS、…...

编程日记 2023/9/15 0:40:38

Redis常用应用场景

Redis是一款开源的基于内存的键值存储系统，它提供了多种数据结构和丰富的功能，适用于各种不同的应用场景。以下是Redis常用的应用场景： 1.缓存：Redis最常见的用途就是作为缓存。由于Redis存储在内存中，读取速度非常快…...

编程日记 2023/9/15 0:38:35

grafana 监控无图解决

环境 k8s 1.26.0 helm 部署的prometheus charts为 prometheus-community/kube-prometheus-stack 问题部署上之后，发现grafana很多dashboard无图。处理过程进grafana dashboards 任意选取一张有问题的图，查看查询语句，如下 sum(container_memory_rss{job="kube…...

编程日记 2023/9/15 0:37:35

Linux--进程-消息队列

一、消息队列，是消息的链接表，存放在内核中。一个消息队列有一个人标识符（及队列ID）来标识。 1、特点： ①、消息队列是面向记录的，其中的消息具有特定的格式以及待定的优先级。 ②、消息队列独立与发送与…...

编程日记 2023/9/15 0:36:33

MySQL下载安装环境变量配置，常用命令

一、下载安装 mysql官网下载连接这个是下载图形安装 https://dev.mysql.com/downloads/installer/ 这个是下载免图形安装 https://dev.mysql.com/downloads/mysql/ 担心个别宝宝没有账号，这边也提供一下，方便下载： 账户：1602404…...

编程日记 2023/9/15 0:35:32

HSRP（热备份路由选择协议）的概念，原理与配置实验

作者：Insist-- 个人主页：insist--个人主页梦想从未散场，传奇永不落幕，持续更新优质网络知识、Python知识、Linux知识以及各种小技巧，愿你我共同在CSDN进步目录一、了解HSRP协议 1. 什么是HSRP协议 2、HSRP协议的…...

编程日记 2023/9/15 0:33:28

数据可视化大屏模板 | 保姆级使用教程

近来很多朋友私信咨询怎么下载使用数据可视化大屏模板，在这里就给大家做一个相对简单的教程总结。有需要的朋友记得先收藏保存，以便不时之需。数据可视化大屏制作软件：奥威BI系统数据可视化报表模板板块：模板秀主要操作&…...

编程日记 2023/9/15 0:31:26

qml怎么显示网页

QML显示网页需要使用Qt WebEngine模块，它提供了一个WebEngineView组件，可以用来在QML中显示和交互网页。首先，确保你已经安装了Qt WebEngine模块。如果你使用的是Qt的在线安装程序，你可以通过Qt Maintenance Tool来添加这个模块。以下是如何在QML中使用WebEngineView来…...

编程日记 2023/9/15 0:28:23

leetcode分类刷题：二叉树（一、简单的层序遍历）

二叉树的深度优先遍历题目是让我有点晕，先把简单的层序遍历总结下吧：配合队列进行的层序遍历在逻辑思维上自然直观，不容易出错 102. 二叉树的层序遍历本题是二叉树的层序遍历模板：每次循环将一层节点出队，再将一层节点…...

编程日记 2023/9/15 0:26:21

STM32 CAN使用记录：FDCAN基础通讯

文章目录目的关键配置与代码轮询方式中断方式收发测试示例链接总结目的 CAN是非常常用的一种数据总线，被广泛用在各种车辆系统中。这篇文章将对STM32中FDCAN的使用做个示例。 CAN的一些基础介绍与使用可以参考下面文章： 《CAN基础概念》https://blo…...

编程日记 2023/9/15 0:25:20

GB/T 11945-2019 蒸压灰砂实心砖和实心砌块检测

蒸压灰砂砖是以砂、石灰为主要原料，经坯料制备，压制成型、蒸压养护而成的实心砖，简称灰砂砖，具有良好的耐久性能和强度。 GB/T 11945-2019蒸压灰砂实心砖和实心砌块检测： 测试要求测试标准抗压强度 GB/T 2542 GB…...

编程日记 2023/9/15 0:23:18

echarts静态饼图

<div class"cake"><div id"cakeChart"></div></div> import * as echarts from "echarts";mounted() {this.$nextTick(() > {this.getCakeEcharts()})},methods: {// 饼状图getCakeEcharts() {let cakeChart echart…...

编程日记 2023/9/15 0:22:17

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/12/7 12:19:22

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/12/15 1:34:41

本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/12/12 19:38:31

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...

编程新知 2025/12/14 20:50:48

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/12/8 20:02:18

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体手搓TuyaAI语音 → 强调自主编程/自定义语音控制（TuyaAI…...

编程新知 2025/12/11 5:02:54

k8s业务程序联调工具-KtConnect

概述原理工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...

编程新知 2025/12/14 20:43:55

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/12/5 5:11:05

文章目录

Vue3样式绑定

1. class 属性绑定

1.1 v-bind:class 设置一个对象，从而动态的切换 class

1.2 在对象中传入更多属性用来动态切换多个 class

1.3 直接绑定数据里的一个对象

1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式

1. 5 数据语法

1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类

2. Vue.js style(内联样式)

2.1 v-bind:style 直接设置样式

2.2 直接绑定到一个样式对象

2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上

2.4 多重值

3. 组件上使用 class 属性

3.1 带有单个根元素的自定义组件上使用 class 属性

3.2 组件有多个根元素

相关文章：