vue2和vue3关于class类的绑定以及style的绑定的区别

本篇为个人笔记

1.对于class类的绑定的区别

vue2:对于vue2而言,所有类的绑定都是基于对象{}来进行的

例如:单个类绑定

<div :class="{active:isActive}"></div>

多个类绑定:

<div :class="{active,hasError,test1,test2,me:isMe}"></div>

 

 vue3:vue3的类绑定是基于数组[]来进行的

例如:单个绑定

<div :class="[isActive?'active':'']"></div>

 多个绑定

<div :class="['a','b','c',IsError?'hasError':'',IsMe?'d':'e']"></div>

 2.对于style的绑定

vue2和vue3对于style的绑定没有变化,都是基于对象{}

<div :style="{color:'red'}"></div>
或者
<div :style="styleObj"></div>vue2中:
data(){return{styleObj:{color:'red'}}
}vue3中:
<script setup lang="ts">let styleObj = {color:'red'}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/6862.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue--声明式导航

一、声明式导航-导航链接 1.需求 实现导航高亮效果 如果使用a标签进行跳转的话&#xff0c;需要给当前跳转的导航加样式&#xff0c;同时要移除上一个a标签的样式&#xff0c;太麻烦&#xff01;&#xff01;&#xff01; 2.解决方案 vue-router 提供了一个全局组件 router…

FPGA_学习_13_方差计算小模块

测距器件APD的性能与器件本身的温度、施加在APD的偏置电压息息相关。 在不同的温度下&#xff0c;APD的偏压对测距性能的影响非常大。 要确定一个合适的APD的偏压Vopt&#xff0c;首先你要知道当前温度下&#xff0c;APD的击穿电压Vbr&#xff0c;一般来讲&#xff0c;Vopt Vb…

【性能优化】MySQL百万数据深度分页优化思路分析

业务场景 一般在项目开发中会有很多的统计数据需要进行上报分析&#xff0c;一般在分析过后会在后台展示出来给运营和产品进行分页查看&#xff0c;最常见的一种就是根据日期进行筛选。这种统计数据随着时间的推移数据量会慢慢的变大&#xff0c;达到百万、千万条数据只是时间问…

FPGA学习——实现任意倍分频器(奇数/偶数倍分频器均可实现)

文章目录 一、分频器二、Verilog实现任意倍分频器2.1、Verilog源码2.2、仿真文件 三、仿真波形图 一、分频器 在FPGA&#xff08;可编程逻辑门阵列&#xff09;中&#xff0c;分频器是一种用于将时钟信号的频率降低的电路或模块。它可以根据输入的时钟信号生成一个较低频率的输…

python+unittest+requests+HTMLRunner搭建接口测试框架,执行用例请求多个不同请求方式的接口

问题描述&#xff1a; 搭建接口测试框架&#xff0c;执行用例请求多个不同请求方式的接口 实现步骤&#xff1a; ① 创建配置文件config.ini&#xff0c;写入部分公用参数&#xff0c;如接口的基本url、测试报告文件路径、测试数据文件路径等配置项 1 [DATABASE] 2 data_add…

Llama2开源大模型的新篇章以及在阿里云的实践

Llama一直被誉为AI社区中最强大的开源大模型。然而&#xff0c;由于开源协议的限制&#xff0c;它一直不能被免费用于商业用途。然而&#xff0c;这一切在7月19日发生了改变&#xff0c;当Meta终于发布了大家期待已久的免费商用版本Llama2。Llama2是一个由Meta AI开发的预训练大…

Redis的9种数据类型与数据持久化

系列文章传送门&#xff1a; 【七天入门数据库】第一天 MySQL的安装部署 【七天入门数据库】第二天 数据库理论基础 【七天入门数据库】第三天 MySQL的库表操作 【七天入门数据库】第四天 数据操作语言DML 一、Redis的9种数据类型的基本操作 &#xff08;一&#xff09;k…

用OpenCV图像处理技巧之白平衡算法(一)

1. 引言 欢迎继续来到我们的图像处理系列&#xff0c;在这里我们将探讨白平衡的关键技术。如果大家曾经拍过一张看起来暗淡、褪色或颜色不自然的照片&#xff0c;那么此时大家就需要了解到白平衡技术的重要性。在本文中&#xff0c;我们将深入探讨白平衡的概念&#xff0c;并探…

idea+springboot+jpa+maven+jquery+mysql进销存管理系统源码

ideaspringbootjpamavenjquerymysql进销存管理系统 一、系统介绍1.环境配置 二、系统展示1. 管理员登录2.首页3.采购订单4.收货入库5. 采购退货6. 商品入库7. 商品出库8. 库存查询9.商品移库10.库存盘点11.销售订单12.发货出库13.销售退货14.商品查询15. 供应商查询16.客户查询…

微信小程序将接口返回的文件流预览导出Excel文件并转发

把接口url替换就可以用了 exportExcel () {wx.request({url: importMyApply, //这个地方是你获取二进制流的接口地址method: POST,responseType: "arraybuffer", //特别注意的是此处是请求文件流必须加上的属性&#xff0c;不然你导出到手机上的时候打不开&#xff…

Jetson Orin Nano 平台适配IMX585 camera驱动调试记录

1. 前言 Jetson Orin Nano Devkit适配imx585 camera 使用argus_camera捕获流,图片是黑色的 用示波器来测量mipi信号,信号正常 Jetpack版本: sensor参数: dts配置: mode0 { /* */ mclk_khz = “24000”; num_lanes = “4”; tegra_sinterface = “serial_c”; ph…

“VCMessage”任务意外失败

从网上查到很多都是说设置这个位置&#xff0c;但是我的已经是对的&#xff0c;还是出现 “VCMessage”任务意外失败这个错误。 又查到一个人说解决方法是更正OutputPath或从父级继承&#xff1a;右键单击项目,然后转到"属性">"链接器">"常规&q…

mac brew安装 node 踩坑日记- n切换node不生效

最近用了一个旧电脑开发&#xff0c;发现里面node管理混乱&#xff0c;有nvm、n和homebrew&#xff0c;导致切换node 切换不了&#xff0c;开发也有莫名其妙的错误。所以我打算重新装一下node&#xff0c;使用n做为管理工具。 1. 删除nvm cd ~ rm -rf .nvm2. 删除n sudo rm -…

GAMS---典型优化模型和算法介绍、GAMS安装和介绍、GAMS程序编写、GAMS程序调试、实际应用算例演示与经验分享

优化分析是很多领域中都要面临的一个重要问题&#xff0c;求解优化问题的一般做法是&#xff1a;建立模型、编写算法、求解计算。常见的问题类型有线性规划、非线性规划、混合整数规划、混合整数非线性规划、二次规划等&#xff0c;优化算法包括人工智能算法和内点法等数学类优…

Vue移动端项目--瑞幸咖啡重构优化

来了客官&#xff0c;好久不见&#xff01; 从年初开始&#xff0c;就有个想法&#xff0c;想着把之前做过的项目重新整理一下。毕竟今时不同往日&#xff0c;从现在的角度去看曾经做过的项目&#xff0c;倒是觉得有很多稚嫩的地方。毕竟无论做什么都是熟能生巧&#xff0c;由浅…

字符串 (2)--- 前缀函数与 KMP 算法

/* https://www.luogu.com.cn/problem/UVA455 最小周期&#xff1a; n - pi[n -1] */ #include <iostream> #include <string> #include <vector> using namespace std; vector<int> prefix_fun(string s) { int len s.length(); /…

深度学习——批标准化Batch Normalization

什么是批标准化&#xff1f; 批标准化&#xff08;Batch Normalization&#xff09;是深度学习中常用的一种技术&#xff0c;旨在加速神经网络的训练过程并提高模型的收敛速度。 批标准化通过在神经网络的每一层中对输入数据进行标准化来实现。具体而言&#xff0c;对于每个输…

Linux基本指令操作

登陆指令&#xff08;云服务器版&#xff09; 当我们获取公网IP地址后&#xff0c;我们就可以打开xshell。 此时会有这样的界面&#xff0c;我们若是想的登陆&#xff0c;则需要输入以下的指令 ssh 用户名公网IP地址 然后会跳出以下的窗口 接着输入密码——密码便是先前定好…

微服务安全简介

​由于其可扩展性、灵活性和敏捷性&#xff0c;微服务架构已经变得越来越受欢迎。然而&#xff0c;随着这种架构的分布和复杂性增加&#xff0c;确保强大的安全措施变得至关重要。微服务的安全性超越了传统的方法&#xff0c;需要采用全面的策略来保护免受不断演变的威胁和漏洞…

Promise 讲解,js知识,es6

文章目录 一、Promise的三种状态1. 初始态pending2. 成功态fulfilled&#xff0c;调用resolve方法3. 失败态rejected&#xff0c;调用reject方法 二、Promise的方法then方法catch方法 三、async和awaitasync 函数await 表达式 四、代码举例帮助理解1、Promise的值通过then方法获…