【vue小知识】给DOM元素动态的添加上一个类||v-bind的妙用

news2024/12/23 13:11:18

在这里插入图片描述
😉博主:初映CY的前说(前端领域) ,📒本文核心:vue文件怎么给DOM元素加上一个类

项目场景:

在前端页面逻辑操作中通常是存在click事件,添加点击效果是为了让页面操作起来更加的有操作性与互动性,那么有什么方式可以实现当我点击自动地为当前的DOM元素添加上一个属于它的类/或多个?
博主经常用判断是否点击当前项的地方,当我在页面上有点击某处,某处就高亮显示,其他取消高亮效果。

前言

DOM介绍

DOM是指文档对象模型(Document Object Model),是一种对于XML或HTML文档的内容进行抽象化和规范化的方法。DOM将整个文档视为一个树型结构,树的每个分支都表示文档中的一个元素,从而可以通过编程的方式来访问和修改文档的内容。

DOM可以通过JavaScript来访问,并且可以通过JavaScript来改变HTML或XML文档的结构、样式和内容。具体来说,DOM可以让开发者通过代码来增加、修改或删除HTML或XML文档中的元素、属性和文本,从而实现对网页的动态操作和交互。

在前端开发中,DOM是非常重要的一部分,因为它可以帮助开发者实现对网页的动态操作和交互,从而提高用户体验。同时,也可以通过DOM来实现一些比较复杂的功能,例如表单验证、数据检索、数据筛选和展示等。

DOM说白了就是我们在页面上看到的由HTML标签解析后的产物

v-bind介绍
v-bind是Vue.js提供的一个指令,用于动态绑定属性。它可以绑定的属性包括class、style、src、href等。通过v-bind指令,可以将Vue实例中的数据绑定到HTML元素的属性上,从而实现数据和视图的实时同步。v-bind指令通常使用简写方式“:”来表示,例如“:class”、“:style”等。下面是v-bind的使用示例

<template>
  <div :class="{'active': isActive}"></div>
  <div v-bind:class="{'active': isActive}"></div>
</template>

在上述示例中,isActive是Vue实例中定义的数据属性,通过v-bind指令与HTML元素的class、src、href属性进行绑定。当Vue实例中的数据发生改变时,绑定的HTML元素属性也会自动更新。

动态添加类:

在 Vue 中,可以通过绑定 class 的方式动态添加类。

我们可以使用 v-bind 或简写的 : 来绑定 class,然后在需要使用 class 的属性上使用绑定变量。

例如,假设我们有一个 data 中的属性 isActive ,我们希望当这个属性值为 true 时,添加一个名为 active 的类。

<!-- 绑定一个类 -->
<div :class="{ active: isActive }"></div>

<!-- 绑定多个类 -->
<div :class="{ active: isActive, 'text-red': isRed }"></div>

代码演示:

此处我是在App.vue文件下写的,下面这段代码可以直接CV到自己的App.vue文件中去。

结构说明:

我创建了一个div给他设置了一个box1的的类,当我点击之后我i希望加上另外一个类来改变当前的显示效果。

<template>
  <div id="app">
    <div class="box1" 
    :class="{ box2: isClick ===true,box3:isClick ===true }" @click="changeColor()">
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isClick:false
    }
  },
  methods:{
    changeColor(){
      this.isClick=true
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  text-align: center;
  margin-top: 120px;
  .box1 {
    margin: auto;
    width: 600px;
    height: 600px;
    background-color: teal;
  }
  .box2{
    background-color: orange;
  }
  .box3{
    height: 200px;
  }
}
</style>

此刻打开页面如下所示:
在这里插入图片描述
触发点击事件之后:
在这里插入图片描述
当我点击操作后, :class="{ box2: isClick ===true,box3:isClick ===true }"这段代码将进行一个判断,当检测到isClick 为true就加上我所写的类。

至此本文结束,愿你有所收获!
期待大家的关注与支持! 你的肯定是我更新的最大动力!!!

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

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

相关文章

13个有趣的Python高级脚本!

关注“Python专栏”微信公众号&#xff0c;回复暗号【面试大全】&#xff0c;立即领取面试题简历模板。 每天我们都会面临许多需要高级编码的编程挑战。你不能用简单的 Python 基本语法来解决这些问题。在本文中&#xff0c;我将分享 13 个高级 Python 脚本&#xff0c;它们可以…

IP路由选择过程

1.1路由选择基础 路由选择是指将分组从一个设备通过互联网络发往位于不同网络上的另一个设备的操作。路由器不关注网络中的主机&#xff0c;而只关注互联起来的网络以及通往各个网络的最佳路径。 目标主机的逻辑网络地址用来获取通过可路由网络传送到指定网络中的分组&#xf…

(一)CSharp-Socket

一、套接字 Windows Sockets 只支持一个通信域&#xff1a;网际域&#xff08;AF-INET&#xff09;&#xff0c;这个域被使用网际协议族通信的进程所使用。 TCP/IP 的 Socket 则提供3种类型的套接字 1、流式套接字&#xff08;SOCK_STREAM&#xff09; 提供面向连接、可靠的数…

STM32 Proteus仿真闹钟设定万年历系统DS1302北京时间LCD1602蜂鸣器报警-0045

STM32 Proteus仿真闹钟设定万年历系统DS1302北京时间LCD1602蜂鸣器报警-0045 Proteus仿真小实验&#xff1a; STM32 Proteus仿真闹钟设定万年历系统DS1302北京时间LCD1602蜂鸣器报警-0045 功能&#xff1a; Protues版本&#xff1a;8.9 硬件组成&#xff1a;STM32F103R6单…

gif格式怎么转换成mp4? 这两个方法实用方便!

GIF&#xff08;Graphics Interchange Format&#xff09;文件是一种常见的动态图像格式&#xff0c;而MP4&#xff08;MPEG-4 Part 14&#xff09;则是一种流行的视频文件格式。有时候&#xff0c;您可能想要将GIF文件转换为MP4格式&#xff0c;以便在不同的平台和设备上进行更…

6-js基础-5

JavaScript 基础 - 5 知道对象数据类型的特征&#xff0c;能够利用数组对象渲染页面 对象综合案例数据类型存储 对象 对象&#xff08;Object&#xff09;&#xff1a;JavaScript里的一种数据类型&#xff08;引用类型&#xff09;&#xff0c;也是用于存储数据的 好处&#x…

机器学习笔记 - 了解机器学习中的小样本(Few-Shot)学习

一、背景概述 深度学习模型在图像分类、语义分割、对象检测等计算机视觉任务中的成功归功于利用了用于训练网络的大量标记数据——一种称为监督学习的方法。尽管在这个信息技术时代有大量的非结构化数据可用,但注释数据很难获得。 由于这个原因,计算机视觉机器学习项目中数据…

python spider 爬虫 之 urllib系列 urlretrieve下载照片、视频 网页

python 中 集成了 urllib urllib import urllib.request # urlopen 方法 url"url" response urllib.request.urlopen(url)print(type(response )) print(response.read()) # 解码 字节--->字符串 decode 字符串--》字节 encode print(response.read()…

腾讯课堂Python课程哪家强?

腾讯课堂Python课程哪家强&#xff1f; 文章目录 腾讯课堂Python课程哪家强&#xff1f;一、前言二、数据读取和数据预处理1、数据读取2、数据处理 三、有多少人愿意花钱学Python&#xff1f;四、多少价位的课买的人最多&#xff1f;五、哪家机构的课最多&#xff1f;销量最好&…

来评选你心中的TOP1编程语言

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

WEBGIS系统数据库设计

文章目录 系统设备模型设计1 .设备模型结构2. 设备逻辑关系模型系统属性数据库设计1 . 系统属性数据库2 . 实体继承关系1) 电气实体部分2 &#xff09;土建实体部分3 &#xff09;其他实体联系 系统采用PostgreS QL 作为属性数据库&#xff0c; PostGIS 作为空间数据库&#xf…

CENTOS上的网络安全工具(二十六)SPARK+NetSA Security Tools容器化部署(2)

〇、抓包与批量转换cap文件 1. Network Monitor 抓包 我们在CENTO OS上的网络安全工具&#xff08;十七&#xff09;搭建Cascade的Docker开发环境中捎带脚介绍了以下windows下的抓包软件。大意就是微软又一款不错的抓包分析软件&#xff0c;名曰nmcap&#xff0c;可在Download …

MySQL——备份与恢复

文章目录 MySQL 完全备份物理冷备份与恢复mysqldump 备份与恢复 MySQL 完全恢复MySQL 增量备份与恢复MySQL 增量备份MySQL 增量恢复 MySQL 完全备份 InnoDB存储引擎的数据库在磁盘上存储成三个文件&#xff1a;db.opt(表属性文件)、表名.frm(表结构文件)、表名.ibd(表数据文件…

FPGA解码 4K MIPI 视频 纯vhdl实现 CSI2 RX 采集OV13850,提供工程源码和技术支持

目录 1、前言2、Xilinx官方主推的MIPI解码方案3、本方案的性能及其优越性4、我这里已有的 MIPI 编解码方案5、vivado工程介绍6、上板调试验证7、福利&#xff1a;工程代码的获取 1、前言 FPGA图像采集领域目前协议最复杂、技术难度最高的应该就是MIPI协议了&#xff0c;MIPI解…

本地部署开源大模型的完整教程:LangChain + Streamlit+ Llama

在过去的几个月里&#xff0c;大型语言模型(llm)获得了极大的关注&#xff0c;这些模型创造了令人兴奋的前景&#xff0c;特别是对于从事聊天机器人、个人助理和内容创作的开发人员。 大型语言模型(llm)是指能够生成与人类语言非常相似的文本并以自然方式理解提示的机器学习模型…

【FreeRTOS】Arduino开发STM32

0.开发环境(工具) Vscode 、platformio、arduino、STM32F103C8T6、USB-TTL 引脚连接&#xff1a;STM32直接设置为烧录模式即可&#xff0c;烧录完成后会自动运行程序。 1.点灯加串口输出调试 注意事项&#xff1a;每次上传程序前&#xff0c;需要按一下复位键。 #include &…

【Linux】2、文件系统、Rootfs

文章目录 一、文件系统二、Rootfs2.1 各目录约定2.1.1 /bin4.2 /boot4.3 /dev4.4 /etc4.5 /home4.6 /lib4.7 /media4.8 /mnt4.9 /opt4.10 /root4.11 /run4.12 /sbin4.13 /srv4.14 /tmp4.15 /usr4.16 /var 一、文件系统 Linux 的文件系统遵循 HFS 设计&#xff0c;有如下实现&a…

浅谈充电桩监控系统的必要性

关注acrelzxz&#xff0c;了解更多详情 摘要&#xff1a;针对当前电动汽车续航能力严重不足以及不能及时充电的问题&#xff0c;将电力电子变流技术、智能监控技术、REIP无线射频技术及CAN总线技术应用到电动汽车智能充电桩的设计与研究中。开展了无人值守的智能电动车充电桩的…

Android 使用webView打开网页可以实现自动播放音频

使用webview 自动播放音视频&#xff0c;场景如&#xff0c;流媒体自动部分&#xff0c;音视频通话等。会出现如下问题&#xff1a; 解决方案如下&#xff1a; 配置webview 如下&#xff0c;这样可以自动播放音频。 webView.getSettings().setMediaPlaybackRequiresUserGestur…

如何从视频里面提取音频,这4个方法非常好用!

今天&#xff0c;我要介绍4种提取视频中音频的方法&#xff0c;每一种都非常简单方便&#xff0c;让你轻松获取视频中的音频&#xff01; 1.音视频分离 这是最简单直接的方法之一&#xff0c;你可以使用视频编辑软件将视频导入&#xff0c;并对其进行音频分离&#xff0c;就可…