vue简单使用三(class样式绑定)

news/2024/5/22 6:53:28

目录

    对象的形式绑定:

    数组的形式绑定:

    内联样式Style


对象的形式绑定:

可以看到class中有两个值

数组的形式绑定:

可以看到也有两个值

内联样式Style

 style样式设置成功

完整代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="js/vue.js"></script><title>Title</title><style>.one{background: pink;width: 100px;height: 100px;text-align: center;line-height: 100px;}</style>
</head>
<body><div class="vuePro"><!-- class属性对象形式属性绑定 --><div :class="{one:isOne,two:isTwo}"></div><!-- class属性数组形式属性绑定 --><span :class='[oneArr,twoArr]'></span><!-- 样式绑定之内联样式Style --><a :style="styles"></a></div>
</body>
<script>new Vue({el:".vuePro",data:{isOne:true,isTwo:true,oneArr:"one",twoArr:"two",styles:{border: '1px solid green',width: '200px',height: '100px'}}});
</script>
</html>


http://www.mrgr.cn/p/51280347

相关文章

小程序技术实现前端热更新的优势

小程序作为轻量级的移动应用形态,凭借其无需下载安装、即用即走的特性,迅速获得用户的青睐。同时,小程序技术也为前端热更新提供了天然的优势。通过 Service Worker 等机制,小程序可以拦截网络请求,动态更新前端代码,而无需用户重新下载应用。小程序技术是一种很有前景的…

互联网轻量级框架整合之MyBatis核心组件

在看本篇内容之前&#xff0c;最好先理解一下Hibernate和MyBatis的本质区别&#xff0c;这篇Hibernate和MyBatis使用对比实例做了实际的代码级对比&#xff0c;而MyBatis作为更适合互联网产品的持久层首选必定有必然的原因 MyBatis核心组件 MyBatis能够成为数据持久层首选框&a…

2024.4.16(周二)腾讯公益赛构思展示

团队成员:郑天羽 张晨旭 孙怡然产品介绍:

基于RAM的几何变换——镜像

基于RAM的几何变换——镜像 一、镜像基本概念 镜像变换可以分为水平镜像和竖直镜像,也就是我们所理解的x轴对称和y轴对称问题。可以预见的是,简单的打拍以及无法满足缓存了,要想实现水平镜像起码需要缓存一整行数据,要想实现垂直镜像起码要缓存一帧数据。这里我们可以直接思…

uniCloud云函数概述---公用模块

公用模块可以被普通云函数、云对象调用。它存放在cloudfunctions/comon文件夹内。一、创建公用模块 打开项目,右击cloudfunctions/comon文件夹,选择“新建公用模块”创建好的公共模块包含二个文件: index.js //公共模块文件 package.json //配置文件二、公用模块模板 A)公…

光明与速度:AI网络中GPU与光模块的协奏曲

&#x1f3b6;在人工智能&#xff08;AI&#xff09;的世界里&#xff0c;GPU和光模块是实现高速计算和数据传输的关键。它们如同一场精心编排的交响乐&#xff0c;每个部分都不可或缺&#xff0c;共同创造出美妙的和谐。&#x1f3bc; GPU&#xff1a;AI网络的心脏&#x1f4…

实用工具系列-ADB使用方式

作者持续关注 WPS二次开发专题系列&#xff0c;持续为大家带来更多有价值的WPS开发技术细节&#xff0c;如果能够帮助到您&#xff0c;请帮忙来个一键三连&#xff0c;更多问题请联系我&#xff08;WPS二次开发QQ群:250325397&#xff09;&#xff0c;摸鱼吹牛嗨起来&#xff0…

Adobe Acrobat PDF 2024

Adobe Acrobat PDF 2024正式发布&#xff01;支持Windows和macOS系统&#xff0c;新界面做了轻微调整。 下载地址 Windows客户端&#xff1a;https://www.123pan.com/s/f43eVv-GKZKd.html macOS客户端&#xff1a;https://www.123pan.com/s/f43eVv-PKZKd.html

实景三维技术在社区服务与管理领域的应用

随着科技的不断发展,实景三维技术已经成为了社区服务与管理领域的一项重要工具。实景三维技术可以通过高精度的三维建模技术,将现实世界中的场景、物体以及人物进行数字化重建,使得人们可以在计算机中实现对现实世界的全方位、多角度的观察和分析。在社区服务与管理领域,实…

【Git】安装 Git

文章目录 1. CentOS 下安装2. Ubuntu 下安装 Git 是开放源代码的代码托管工具&#xff0c;最早是在 Linux 下开发的。开始也只能应用于 Linux 平台&#xff0c;后面慢慢的被移植到 Windows 下。现在&#xff0c;Git 可以在 Linux、Unix、Mac 和 Windows 这几大平台上正常运行了…

复杂网络社区发现算法聚类分析全国电梯故障数据和可视化:诊断电梯“安全之殇”|附代码数据

参考原文:http://tecdat.cn/?p=2186 最近我们被客户要求撰写关于复杂网络社区发现算法的研究报告,包括一些图形和统计输出。 物业工程肩负着维持项目各类设施设备的正常运作,保障全体业主的正常生活,令物业保值升值,是项目的心脏部门。拓端数据(tecdat)研究人员根据全国…

2024年4月17日第三十五篇

今天商讨了任务分配和api的设计,变量的命名,工作时间:两小时。

团队演讲视频及其ppt展示

演讲视频地址:https://dmxupday.oss-cn-beijing.aliyuncs.com/video_20240417_114735_edit.mp4 ppt展示:https://files.cnblogs.com/files/blogs/821500/益享-视频分享计划.pptx?t=1713349463&download=true 部分内容展示:

安全大脑与盲人摸象

21世纪是数字科技和数字经济爆发的时代&#xff0c;互联网正从网状结构向类脑模型进行进化&#xff0c;出现了结构和覆盖范围庞大&#xff0c;能够适应不同技术环境、经济场景&#xff0c;跨地域、跨行业的类脑复杂巨型系统。如腾讯、Facebook等社交网络具备的神经网络特征&…

3D Matching:实现halcon中的find_surface_model

halcon中的三维匹配大致分为两类&#xff0c;一类是基于形状的(Shape-Based)&#xff0c;一类是基于表面的(Surface-Based)。基于形状的匹配可用于单个2D图像中定位复杂的3D物体&#xff0c;3D物体模型必须是CAD模型&#xff0c;且几何边缘清晰可见&#xff0c;使用的相机也要预…

ABC211 复盘

ABC211 复盘 [ABC211C] chokudai 思路解析 题目说的很明白,看到匹配子序列可以轻易想到是简单 dp,直接做即可。 时间复杂度:两个字符串两层循环,\(O(8 \times N)\)。 code #include<bits/stdc++.h> using namespace std; const int N = 1e5 + 10; const long long mo…

说说你对树的理解?相关的操作有哪些?

一、是什么 在计算机领域,树形数据结构是一类重要的非线性数据结构,可以表示数据之间一对多的关系。以树与二叉树最为常用,直观看来,树是以分支关系定义的层次结构 二叉树满足以下两个条件:本身是有序树 树中包含的各个结点的不能超过 2,即只能是 0、1 或者 2如下图,左侧…

解决加载GPT2(Tensorflow预训练模型)的Linear权重到PyTorch的Linear权重 形状不匹配(互为转置)问题

解决报错内容: RuntimeError: Error(s) in loading state_dict for PyTorchBasedGPT2:size mismatch for transformer.h.0.attn.c_attn.weight: copying a param with shape torch.Size([768, 2304]) from checkpoint, the shape in current model is torch.Size([2304, 768])…

掌握网络抓取技术:利用RobotRules库的Perl下载器一览小红书的世界

引言 在信息时代的浪潮下&#xff0c;人们对于获取和分析海量网络数据的需求与日俱增。网络抓取技术作为满足这一需求的关键工具&#xff0c;正在成为越来越多开发者的首选。而Perl语言&#xff0c;以其卓越的文本处理能力和灵活的特性&#xff0c;脱颖而出&#xff0c;成为了…