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

目录

    对象的形式绑定:

    数组的形式绑定:

    内联样式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.mfbz.cn/a/547190.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

EasyImage2.0 简单图床开源 多功能 简单易用图床系统源码

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 支持API 支持仅登录后上传 支持设置图片质量 支持压缩图片大小 支持文字/图片水印 支持设置图片指定宽/高 支持上传图片转换为指定格式 支持限制最低宽度/高度上传 支持上传其他文件格…

攻防世界---misc---适合作为桌面

1.下载附件&#xff0c;是一张图片 2.用Stegsolve打开&#xff0c;打开图片一直点击下面的“>”&#xff0c;知道看到二维码 3.用QR Research解码&#xff0c;得到一串十六进制 4.用winhex转为pyc文件&#xff0c;先把十六进制内容存放在.txt文本中&#xff0c;然后用winhex…

(处理流)转换流与对象流

1.字符编码与解码. (1). 字符编码 : 将字符&#xff0c;字符串&#xff0c;字符数组------&#xff1e; 字节&#xff0c;字节数组. (2). 字节&#xff0c;字节数组------&#xff1e;字符&#xff0c;字符串&#xff0c;字符数组. 如果希望程序在读取文件时(也就是解码)不…

OpenHarmony开发实例:【分布式游戏鉴权应用】

1.介绍 本文将介绍分布式游戏鉴权应用。操作过程为&#xff1a; 设备A点击“开始游戏”按钮&#xff0c;开始搜索周边设备。 设备A显示周边设备&#xff0c;点击设备B并发起连接请求&#xff0c;远程拉起设备B的FA。 设备B收到请求后&#xff0c;选择是否允许“开启游戏”。…

《R语言与农业数据统计分析及建模》学习——数据读入

一、工作目录 # 获取当前工作目录 getwd()# 改变工作目录为指定路径下的文件夹 # 注意工作目录的表达方式 setwd(D:/R_class) setwd(D:\\R_class) 二、文件路径 读取文件中的数据首先要确定文件路径&#xff0c;如果文件不在工作目录下&#xff0c;则必须使用绝对路径 1、文…

STL —— stack、queue

博主首页&#xff1a; 有趣的中国人 专栏首页&#xff1a; C专栏 目录 1. 容器适配器 2. 栈的模拟实现 3. 队列的模拟实现 4. 双端队列deque 4.1 deque的原理介绍 4.2 deque的缺陷 4.3 为什么选择deque作为stack和queue的底层默认容器 本篇文章主要讲解 stack 和 queue …

MDK-ARM Keil5.38 下载安装环境搭建

一、keil软件介绍 KEIL是公司的名称&#xff0c;有时候也指KEIL公司的所有软件开发工具&#xff0c;目前2005年Keil由ARM公司收购&#xff0c;成为ARM的公司之一。 MDK&#xff08;Microcontroller Development Kit&#xff09; 也称MDK-ARM、KEIL MDK、RealView MDK、KEIL For…

IDEA 设置类注释模板作者、日期、描述等信息(推荐标准!)

idea注释模版配置 idea作为越来越多程序员使用的开发工具&#xff0c;平时的代码注释也非常的关键&#xff0c;类上注释和方法上注释每次换电脑或者新同事入职都要统一修改&#xff0c;找了网上好多教程都写的乱七八糟的啥都有&#xff0c;为方便统一就自己写一个操作方法&…

【yolov5小技巧(2)】---将yolov5中的特征图以热力图的方式进行可视化

文章目录 &#x1f680;&#x1f680;&#x1f680;前言一、1️⃣ 将特征图可视化的文章CFPNet二、2️⃣yolov5自带的特征图可视化工具三、3️⃣如何将特征图转换成热力图 &#x1f440;&#x1f389;&#x1f4dc;系列文章目录 【yolov5小技巧(1)】—可视化并统计目标检测中的…

Leetcode二叉树刷题

给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true public boolean isSymmetric(TreeNode root) {if(rootnull)return true;return compare(root.left,root.right);}public boole…

Python学习笔记(37)——用xlwings库生成excel

老规矩先pip入xlwings库 STEP1:下载xlwings库 windowsr>>cmd>>pip install xlwings (如果需要不同版本可以到pypi上搜&#xff09; STEP2:完成EXCEL初级创建 请打开您的编写软件~~~~~&#xff08;小编的显示结果为PYCHARM编写的&#xff0c;因为颜色标注好看(…

113.PyQt5_QtPrintSupport_打印操作

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

光电传感器的工作原理简介

光电传感器是一种利用光电效应将光信号转换为电信号的传感器。 工作原理 光照射&#xff1a;光电传感器通过光源&#xff08;如LED或激光&#xff09;照射在其表面。 光电转换&#xff1a;光线与传感器材料发生光电反应&#xff0c;产生电信号。这种转换过程涉及到光子与电子的…

论文解读 --- 《针对PowerShell脚本的有效轻量级去混淆和语义感知攻击检测》

开篇 今天我们继续来解读安全行业优秀论文&#xff0c;通过学习他人的智慧成果&#xff0c;可以不断丰富我们的安全视野&#xff0c;使用它山之石来破解自身的难题。 这次要解读的论文为《Effective and Light-Weight Deobfuscation and Semantic-Aware Attack Detection for…

解决宝塔的FTP无法使用被动模式

问题&#xff1a;宝塔安装完ftp管理软件之后&#xff0c;无法使用被动模式连接 解决&#xff1a; 提示&#xff1a; 如果还是不行&#xff0c;那么要看看防火墙和安全组有没有放行被动模式的端口&#xff0c;宝塔安装的pure-ftpd软件的被动模式端口默认是39000至400…

使用稳压管和三极管射极输出器电路驱动PMOS

当电源电压大于PMOS 管的最大栅源电源时&#xff0c;不能直接把栅极拉到地&#xff0c;需要一点特殊的电路来限制栅极驱动电压。有的地方是用电阻分压器做的&#xff0c;比如这种&#xff1a; NPN 三极管导通时&#xff0c;MOS 管栅极电压是两个电阻中间的电压。这种设计最大的…

“华为杯“华南理工大学程序设计竞赛 L-再一道好题

题目 #include<bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second const int maxn 1e6 5; const int inf 1e9 5;using namespace std;int n, m;void solve(){int res 0;int q;string s;int k;cin …

华为ensp中nat server 公网访问内网服务器

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月15日17点30分 NAT服务器是一种在网络边界设备上配置的服务&#xff0c;它允许外部网络的用户访问内部网络中的服务或主机&#xff0c;同时隐藏了内部网络的真实IP地…

Eigen笔记2:矩阵拼接

直接贴代码吧&#xff0c;使用的MatrixXd 和<<运算符&#xff1a; int main(int argc, char *argv[]) {Eigen::MatrixXd B(2, 2);B << 1, 2,3, 4;Eigen::MatrixXd C(2, 2);C << 5, 6,7, 8;Eigen::MatrixXd D(2, 2);D << 9, 10,11, 12;Eigen::MatrixXd…

《由浅入深学习SAP财务》:第2章 总账模块 - 2.6 定期处理 - 2.6.5 年末操作:维护新财政年度会计凭证编号范围

2.6.5 年末操作&#xff1a;维护新财政年度会计凭证编号范围 财务系统的维护者要在每年年末预先设置好下一年度的会计凭证编号范围&#xff08;number range&#xff09;&#xff0c;以便下一年度会计凭证能够顺利生成。这一操作一定要在下一年度1月1日以前预先完成。 …
最新文章