Vue 绑定style和class

在应用界面中,某些元素的样式是动态的。class 与 style 绑定就是专门用来实现动态样式效果的技术。

如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定。

 绑定 class 样式【字符串写法】

适用于:类名不确定,需要动态指定。

.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.red{background-color: red;
}
<div id="APP"><div class="box" :class="back" @click="toggleBack">点击变成红色</div>
</div>

:第二个 class 使用的是 v-bind 简写的方式, :class=" " 。

const vm = new Vue({el: "#APP",data(){return {back:"aqua"}},methods:{toggleBack(){this.back = "red";}}
});

点击前:

点击后:

 绑定 class 样式【数组写法】:

适用于:要绑定多个样式,个数不确定,名字也不确定。

.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.border{border: 20px solid red;
}
.radius{border-radius: 25px;
}
<div id="APP"><div class="box" :class="classArr">多个class样式</div>
</div>
const vm = new Vue({el: "#APP",data(){return {classArr:["aqua","border","radius"]}}
});

如果要绑定多个样式,个数确定,但是名字不确定,也可以使用以下写法: 

<div id="APP"><div class="box" :class="[a,b,c]">多个class样式</div>
</div>
const vm = new Vue({el: "#APP",data(){return {a: "aqua",b: "border",c: "radius"}}
});

:效果与上边的示例相同,a、b、c 都是变量,控制是否使用某个 class 样式。

原创作者:吴小糖

创作时间:2023.10.13 

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

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

相关文章

leetcode:1929. 数组串联(python3解法)

难度&#xff1a;简单 给你一个长度为 n 的整数数组 nums 。请你构建一个长度为 2n 的答案数组 ans &#xff0c;数组下标 从 0 开始计数 &#xff0c;对于所有 0 < i < n 的 i &#xff0c;满足下述所有要求&#xff1a; ans[i] nums[i]ans[i n] nums[i] 具体而言&am…

Mongodb----部署副本集 实现读写分离

使用软件&#xff1a; xshell7 vmware16 centos8 nosql booster 1 部署副本集 推荐方案&#xff1a; 为了降低资源分配&#xff0c;这里仅使用一台服务器&#xff0c;但是分配3个端口&#xff08;27017、27018、27019&#xff09;来分别实现 主节点、副本节点…

K8S:配置资源管理 Secret和configMap

配置资源管理 Secret和configMap [TOC](配置资源管理 Secret和configMap)一、Secret1.Secret概念2.Secret的类型3.secret的三种参数4.Pod 的3种方式来使用secret5.Secret创建及案例 二.ConfigMap1.ConfigMap概念2.ConfigMap功能及应用场景3.ConfigMap创建及案例 三、总结1.secr…

基于SSM+Vue的线上学习网站

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

springboot 通过url下载文件并上传到OSS

DEMO流程 传入一个需要下载并上传的url地址下载文件上传文件并返回OSS的url地址 springboot pom文件依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w…

论文阅读:

来源&#xff1a;公众号看到一篇文章 原文&#xff1a;https://arxiv.org/pdf/2301.04275.pdf 代码&#xff1a;GitHub - fengluodb/LENet: LENet: Lightweight And Efficient LiDAR Semantic Segmentation Using Multi-Scale Convolution Attention 0、摘要 基于LiDAR的语义…

Linux:【Kafka四】集群介绍与单机搭建

目录 环境简介 一、搭建kafka集群 1.1、复制出两个kafka的配置文件 1.2、修改配置文件中的如下属性 二、启动kafka集群 三、可校验kafka三个节点是否均启动成功 四、查看集群中主题的分区和副本 4.1、新建一个包含了分区和副本的主题 4.2、查看该主题的详细信息 五、…

linux下安装ffmpeg的详细教程、ffmpeg is not installed

1、下载解压 wget http://www.ffmpeg.org/releases/ffmpeg-6.0.tar.gz tar -zxvf ffmpeg-6.0.tar.gz 2、 进入解压后目录,输入如下命令/usr/local/ffmpeg为自己指定的安装目录 cd ffmpeg-6.0 ./configure --prefix/usr/local/ffmpeg make sudo make install 3、配置变量 v…

kaggle新赛:写作质量预测大赛【数据挖掘】

赛题名称&#xff1a;Linking Writing Processes to Writing Quality 赛题链接&#xff1a;https://www.kaggle.com/competitions/linking-writing-processes-to-writing-quality 赛题背景 写作过程中存在复杂的行为动作和认知活动&#xff0c;不同作者可能采用不同的计划修…

Google zxing 生成带logo的二维码图片

环境准备 开发环境 JDK 1.8SpringBoot2.2.1Maven 3.2 开发工具 IntelliJ IDEAsmartGitNavicat15 添加maven配置 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.4.0</version> </…

thinkphp6 入门(8)-- Session

开启Session Session功能默认是没有开启的&#xff08;API应用通常不需要使用Session&#xff09; think\middleware\SessionInit// 添加引用 use think\facade\Session; 赋值 Session::set(name, thinkphp);取值 // 如果值不存在&#xff0c;返回null Session::get(name)…

机器学习-有监督学习-神经网络

目录 线性模型分类与回归感知机模型激活函数维度诅咒过拟合和欠拟合正则数据增强数值稳定性神经网络大家族CNNRNNGNN&#xff08;图神经网络&#xff09;GAN 线性模型 向量版本 y ⟨ w , x ⟩ b y \langle w, x \rangle b y⟨w,x⟩b 分类与回归 懂得两者区别激活函数&a…

Service Weaver:以单体形式编码,以微服务形式部署

分布式应用的主流架构模式演化为微服务架构已经有些年头了。微服务、DevOps、持续交付和容器技术(k8s)是构成最初云原生概念[1]的核心要素。它们相生相拌&#xff0c;共同演进&#xff0c;并推动了云计算全面进入云原生时代。 云原生应用普遍采用微服务架构&#xff0c;遗留的单…

C# Onnx Yolov8 Detect 涉黄检测

效果 项目 检测类别 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; usi…

【Linux】从零开始学习Linux基本指令(一)

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;Linux入门 &#x1f525;该文章主要了解Linux操作系统下的基本指令。 目录&#xff1a; ⌛️指令的理解⏳目录和文件的理解⏳一些常见指令✉…

“小程序:改变电商行业的新趋势“

目录 引言1. 小程序的简介1.1 什么是小程序&#xff1f;1.2 小程序的优势 2. 小程序之电商演示1.注册微信小程序2.安装开发工具3.创建项目 3. 小程序之入门案例总结 引言 随着移动互联网的迅猛发展&#xff0c;小程序作为一种全新的应用形态&#xff0c;正在逐渐改变着传统电商…

鲲山科技:引入和鲸 ModelWhale,实现量化策略的高效迭代

量化投资是数据科学在金融行业的应用。 2023 年&#xff0c;量化行业的超额收益开始收敛&#xff0c;量化私募如何形成自身核心竞争力&#xff1f; 和鲸拜访客户鲲山科技&#xff08;深圳&#xff09;&#xff0c;揭示其“弯道超车”的独家秘诀。 群体作战 年初至今&#xff…

【软考-中级】系统集成项目管理工程师-配置管理历年案例

持续更新。。。。。。。。。。。。。。。 目录 2023 上 试题三(20分) 2023 上 试题三(20分) 某公司有自己的质量管理体系&#xff0c;其中配置管理程序已运行多年&#xff0c;由项目经理牵头组建变更控制委员会(CCB)&#xff0c;在创建配置管理环境后&#xff0c;并经过变更申请…

NewStarCTF 2023 公开赛道 WEEK2|Crypto

目录 T1.滴啤 T2.不止一个pi T3.halfcandecode T4.Rotate Xor T5.broadcast T6.partial decrypt T1.滴啤 下载题目附件&#xff0c;我们获得到以下代码。 from Crypto.Util.number import * import gmpy2 from flag import flag def gen_prime(number):p getPrime(numb…

跨行或跨列布局

关键点 1、float 实现 2、flex 实现 3、grid 实现效果预览: html: <div class="container"><h2>float 实现</h2>