开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

VueJS向<html>标记添加/删除类

VueJS是一款流行的前端框架，它可以通过简单的指令和数据绑定来动态地更新HTML标记。要向HTML标记添加或删除类，我们可以使用VueJS的class绑定指令。

要向HTML标记添加类，我们可以使用v-bind:class指令，并将一个对象传递给它，对象的属性表示要添加的类名，属性值表示该类名是否应该存在。

例如，我们可以在Vue实例中定义一个data属性，其中包含一个布尔值isRed：

data: {
  isRed: true
}

然后，在HTML标记中使用v-bind:class指令来添加一个名为"red"的类：

<div v-bind:class="{ 'red': isRed }">Hello, World!</div>

上述代码将根据isRed属性的值动态地向<div>标记添加或删除"red"类。如果isRed为true，则<div>标记将具有"red"类；如果isRed为false，则类将被删除。

关于VueJS的class绑定指令的更多信息，您可以查看腾讯云提供的Vue.js文档： Vue.js文档

腾讯云还提供了一系列与VueJS相关的产品和服务，您可以通过以下链接了解更多：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vue 3.4 来了！

该版本包含一些实质性的内部改进-其中最显著的是重写了模板解析器，速度提高了 2 倍，还重构了反应性系统，使效果触发更准确、更高效。此外，它还对 API 进行了一系列质量改进，包括稳定了 defineModel 和绑定道具时的新同名简称。

01

Vue 3.4 发布！

该版本包含一些实质性的内部改进-其中最显著的是重写了模板解析器，速度提高了 2 倍，还重构了反应性系统，使效果触发更准确、更高效。此外，它还对 API 进行了一系列质量改进，包括稳定了 defineModel 和绑定道具时的新同名简称。

04

快速上手VueJS动画

动画可以使您的网站更具现代感，而且还能为网站带来更好的用户体验。幸运的是，对于开发人员来说，VueJS动画只需几分钟即可完成设置。

02

vuejs中的组件以及父子组件间通信传值

您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式.以及什么是组件,如何定义和使用组件,父子组件之间如何进行简单的通信传值...

01

Vue 3.0对Web开发的影响

去年11月，Vue创建者Evan You展示了Vue 3.0的关键更新 - 这是不断上升的Javascript框架的最新版本。这些优化使Vue更高效，模块化且易于使用。我将讨论这些变化以及我认为他们将在Vue 3.0发布后产生的影响。

02

Markdown 拓展-使用 vue.press 生成网站

VuePress V2 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown在新窗口打开来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。

01

Vuejs开发过程中一些常见问题的解决方法

在看demo的时候看到在vue-router写着keep-alive，keep-alive的含义：如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令

03

使用 Vue 开发的，这 7 个 VS Code 插件万万不可错过！

在 VS Code 中添加好用的插件可以提高我们的开发效率。这些可以帮助我们格式化，扩充性，执行最佳实践的代码方式，自动完成一些琐碎的事情。好了，费话不多说，那我们开始吧！

02

深入 Vue2.x 的虚拟 DOM diff 原理

h5学习笔记：vuethink 配置

vuethink 是一款基于PHP TP5和Vuejs 结合的后台框架，设计起来是使用较为前沿。在使用的过程，需要对这款开源的后台做一些调整和面对一些细节的坑。前段时间也因为有项目需求，所以下载了玩了一下。好，下面看看如何安装使用。

02

VueJS 常用系统指令

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

02

[科普文] Vue3 到底更新了什么？

Vue3 已经发布一段时间了，这个版本从底层实现到上层 API 设计都发生了非常大的变化，但具体改变了些什么呢？一起简单盘点下：

02

v-if v-else v-show

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

02

Vue3.0新特性

Vue3.0的设计目标可以概括为体积更小、速度更快、加强TypeScript支持、加强API设计一致性、提高自身可维护性、开放更多底层功能。

01

18. Vue keycodes按键修饰符

在业务开发中，例如：用户登录添加用户名和密码之后，按下回车键完成登录，这个操作就需要绑定按键的keyup事件，并且还要使用「按键修饰符」来指定按下的键盘按钮。

02

vue散碎知识点学习

为了解决方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

02

v-if与v-show的区别

v-if指令与v-show指令都可以根据值动态控制DOM元素显示隐藏，v-if和v-show属于Vue的内部常用的指令，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

02

Vue实战系列—路由轻松设置vue-router（3）

在web端路由（route）就是URL到函数的映射，vue的router就像一个容器，分配，处理每一个route到URL中。

01

深入分析Vue-Router原理,彻底看穿前端路由

如今大前端的趋势下，你停下学习的脚步了吗？Vue3.0 都 Beta 了,但是还是感觉有些知识点云里雾里的，小编研究了一下Vue-Router源码整理和总结了一些东西,看尤大大怎么设计的。希望能够对你们有所帮助，如果喜欢的话，可以帮忙点个赞。

02

Vue2学习计划一：Vue初体验

既然点开了，就不啰嗦为什么学Vue了，或者Vue有多好。实在太多大佬已经解释过了。初体验，那么必然就是先怎么安装，然后怎么使用Vue输出Hello World，最后再说一下Vue的总体结构。

03

17 Most popular Vue.js plugins

Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。

03

收集

http://blog.csdn.net/fungleo/article/details/77584701

05

Vue2向Vue3过渡，持续记录

迁移指南：https://v3.cn.vuejs.org/guide/migration/introduction.html

04

Vue

通过前面的介绍，我们对目前的项目工程化有了大体了了解，那么其中，在第二阶段的工程化演进中，有一个重要的工程设计理念诞生，他就是著名的 MVC 设计模式，简单点，MVC 其实就是为了项目工程化的一种分工模式；

04

【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验

最近入门 Vue3 并完成 3 个项目，遇到问题蛮多的，今天就花点时间整理一下，和大家分享 15 个比较常见的问题，基本都贴出对应文档地址，还请多看文档~ 已经完成的 3 个项目基本都是使用 Vue3 (setup-script 模式)全家桶开发，因此主要分几个方面总结：

02

vue常用组件库_vue内置组件

element：饿了么出品的Vue2的web UI工具套件 Vux：基于Vue和WeUI的组件库 mint-ui：Vue 2的移动UI元素 iview：基于 Vuejs 的开源 UI 组件库 Keen-UI：轻量级的基本UI组件合集 vue-material：通过Vue Material和Vue 2建立精美的app应用 muse-ui：三端样式一致的响应式 UI 库 vuetify：为移动而生的Vue JS 2组件框架 vonic：快速构建移动端单页应用 eme：优雅的Markdown编辑器 vue-multiselect：Vue.js选择框解决方案 vue-table：简化数据表格 VueCircleMenu：漂亮的vue圆环菜单 vue-chat：vuejs和vuex及webpack的聊天示例 radon-ui：快速开发产品的Vue组件库 vue-waterfall：Vue.js的瀑布布局组件 vue-carbon：基于 vue 开发MD风格的移动端 vue-beauty：由vue和ant design创建的优美UI组件 vue-blu：帮助你轻松创建web应用 vueAdmin：基于vuejs2和element的简单的管理员模板 vue-syntax-highlight：Sublime Text语法高亮 vue-infinite-scroll：VueJS的无限滚动指令 Vue.Draggable：实现拖放和视图模型数组同步 vue-awesome-swiper：vue.js触摸滑动组件 vue-calendar：日期选择插件 bootstrap-vue：应用于Vuejs2的Twitter的Bootstrap 4组件 vue-swipe：VueJS触摸滑块 vue-amap：基于Vue 2和高德地图的地图组件 vue-chartjs：vue中的Chartjs的封装 vue-datepicker：日历和日期选择组件 markcook：好看的markdown编辑器 vue-google-maps：带有双向数据绑定Google地图组件 vue-progressbar：vue轻量级进度条 vue-picture-input：移动友好的图片文件输入组件 vue-infinite-loading：VueJS的无限滚动插件 vue-upload-component：Vuejs文件上传组件 vue-datetime-picker：日期时间选择控件 vue-scroller：Vonic UI的功能性组件 vue2-calendar：支持lunar和日期事件的日期选择器 vue-video-player：VueJS视频及直播播放器 vue-fullcalendar：基于vue.js的全日历组件 rubik：基于Vuejs2的开源 UI 组件库 VueStar：带星星动画的vue点赞按钮 vue-mugen-scroll：无限滚动组件 mint-loadmore：VueJS的双向下拉刷新组件 vue-tables-2：显示数据的bootstrap样式网格 vue-virtual-scroller：带任意数目数据的顺畅的滚动 DataVisualization：数据可视化 vue-quill-editor：基于Quill适用于Vue2的富文本编辑器 Vueditor：所见即所得的编辑器 vue-html5-editor：html5所见即所得编辑器 vue-msgbox：vuejs的消息框 vue-slider：vue 滑动组件 vue-core-image-upload：轻量级的vue上传插件 vue-slide：vue轻量级滑动组件 vue-lazyload-img：移动优化的vue图片懒加载插件 vue-drag-and-drop-list：创建排序列表的Vue指令 vue-progressive-image：Vue的渐进图像加载插件 vuwe：基于微信WeUI所开发的专用于Vue2的组件库 vue-dropzone：用于文件上传的Vue组件 vue-charts：轻松渲染一个图表 vue-swiper：易于使用的滑块组件 vue-images：显示一组图片的lightbox组件 vue-carousel-3d：VueJS的3D轮播组件 vue-region-picker：选择中国的省份市和地区 vue-typer：模拟用户输入选择和删除文本的Vue组件 vue-impression：移动Vuejs2 UI元素 vue-datatable：使用Vuejs创建的DataTableView vue-instant：轻松创建自动提示的自定义搜索控件 vue-dragging：使元素可以拖拽 vue-sli

02

前端不哭！最新优化性能经验分享来啦 | 技术头条

【导语】Angular、React、VueJS 是现在一些主流的 JS 框架，那它们在构建网站或前端程序时，是如何保证性能，减少大家诟病的？今天这篇文章，就为大家介绍一些工具或技术技巧，来帮助前端工程师保证开发性能与效率，毕竟快过节了，要赶紧把研发和优化都做到位，少加班！

03

vue中的按键修饰符

在监听键盘事件时，我们经常需要查找常用按键对应的 code 值。Vue 可以在 v-on 上添加按键修饰符，用于监听按键事件

03

v-for 遍历数组

我们在遍历基础元素()括号里可以指定两个数组,前面的是数据基本元素,后面是的索引值

01

如何在Vue中动态添加类名

能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题，根据组件的状态添加类，还可以编写依赖于样式的组件的不同变体。

01

前端基础-TodoList 案例

产品功能简洁，需求明确，所需知识点丰富；实现基本功能容易，涵盖所学基础知识；而可扩展性强，完善所有功能比较复杂，所需技术众多；在学习中，可以灵活取舍；

01

Vue-第三方库扩展

之前写过一篇 Vue-组件扩展的文章，通常我们采用 extends 或 mixins 进行扩展组件；但项目中我们经常还会使用一些第三方库（Lodash, Moment等），如何调用这些工具方法智者见智仁者见仁。

03

Vue-第三方库扩展

之前写过一篇 Vue-组件扩展的文章，通常我们采用 extends 或 mixins 进行扩展组件；但项目中我们经常还会使用一些第三方库（Lodash, Moment等），如何调用这些工具方法智者见智仁者见仁。

03

使用Vue.js和Axios从第三方API获取数据 — SitePoint

本文转载自使用Vue.js和Axios从第三方API获取数据 — SitePoint 原文链接： www.sitepoint.com，本译文的链接地址：使用Vue.js和Axios从第三方API获取数据 — SitePoint，Github上面本项目的源代码链接为：vuejs-news，本文中的纽约时报API的API秘钥申请有些问题，访问不了。通常情况下，在构建 JavaScript 应用程序时，您希望从远程源或从API获取数据。我最近研究了一些公开的API，发现可以使用这些数据源完成很多很酷的东西。

02

分享 15 个 Vue3 全家桶开发的避坑经验

最近入门 Vue3 并完成 3 个项目，遇到问题蛮多的，今天就花点时间整理一下，和大家分享 15 个比较常见的问题，基本都贴出对应文档地址，还请多看文档~ 已经完成的 3 个项目基本都是使用 Vue3 (setup-script 模式)全家桶开发，因此主要分几个方面总结： Vue3 Vite VueRouter Pinia ElementPlus 更多文章，欢迎关注我的主页。 ◆ 一、Vue3 1. Vue2.x 和 Vue3.x 生命周期方法的变化文档地址：https://v3.cn.vuejs.org

03

Vue中key的作用

key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法，而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。此外有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。

01

【编程鹿】学Vue.js这一篇就够了「万字学会|通俗易懂」上篇

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

02

前端ReactJS技术介绍

WEB应用程序基本架构胖服务端 fat_server.png 这个架构的特点：后台良好的分层模型页面由后台输出至浏览器，一般采用JSP、PHP等动态页面技术处理页面的动态内容一些改进：引入A

04

前端基础-Vue.js单页应用

优缺点都很明显，但是我们都还没尝试过就来评价，就会显得空口无凭；接下来我们先来学习制作单页应用，然后再来进行点评；

02

vue 使用数组splice方法失效，且总是删除最后一项的解决办法。[通俗易懂]

今天在写项目的时候，遇到一个很简单的需求，下图，点击添加标签，左边出现一个可以输入的标签，点击删除按钮，就能删除当前标签，很简单的需求，我却搞了一个多小时(哎…新手愚笨啊)

02

通过示例了解Vue过渡和动画

Vue过渡和动画让我们网站更具现代感并为网站访问者提供更好的用户体验的好方法。幸运的是，对于开发人员而言，Vue动画只需几分钟即可完成设置。

04

在没有DOM操作的日子里，我是怎么熬过来的（上）

前言在我动笔写这篇文章的时候，我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做，请听闰土娓娓道来。前几年我还在想，假如有一天，前端世界里不能再直接操作dom了，我该怎么办？没想到竟一语成谶，这一天终究还是来了...... 此文记录了一次JQ党转变成Vue信徒的心路历程。那么接下来，正文从这开始~ 熟悉闰土的朋友都知道，我是从JQ时代过来的前端，在刚接触react和vue这类MVVM框架的时候，完全可以用一脸懵逼来形容我，最为贴切。在啃官方API文档的时候，总是按照以前jquery的

前后端通吃，vue大全Mark一下

仓库地址：https://github.com/opendigg/awesome-github-vue

02

v-on绑定的一系列事件修饰符

官方文档看-->https://cn.vuejs.org/v2/guide/events.html

01

vue[0x02] -- 基础特性

你会发现这样一个现象，我本来时挂载到id为app的div上的，但是它并没有这么做。

02

Vue笔记(8)

后续项目中,我们会使用Vuejs进行开发,而且会以特殊的文件来组织Vue的组件

02

Vue开发、学习笔记，持续记录

Vue-Router学习：https://nicen.cn/vue-router.html

03

Parcel.js + Vue 搭建笔记

去年（已经是三年前了！）年末便听得新一代打包工具 Parcel.js 的风风火火，今日（两年前的某一天）也终于得以静下心来试一试。

03

【学好】前端新人如何能把框架学好？

就是说，基本的js、html、css都ok啦，但前端框架要怎么学习会进度比较快呢？比较笼统的回答当然是要多写多看多练。但是，怎么样做会进度快一点呢？这其中应该也会有一些规律和窍门吧。确实是有一些规律，但也不能说是窍门，因为学习是很难取巧的事情，讲究的是一分耕耘一分收获。

02

一、VueJs 填坑日记之基础概念知识解释

08

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭