点击实现来回切换class切换样式

最新推荐文章于 2024-04-11 15:20:18 发布

桌酱

最新推荐文章于 2024-04-11 15:20:18 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： css class vue

本文链接：https://blog.csdn.net/m0_46538057/article/details/111639488

这篇博客介绍了如何在Vue中通过v-bind:class指令和@click事件处理来切换元素的class，从而改变元素的显示样式。初始状态为class1，点击后切换到class2，再次点击则恢复为class1。示例代码展示了数据属性isYes与class的绑定逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：初始为class1点击一下为class2，再点一下变回class2，根据不同的class对应的style来切换显示
html

<div v-bind:class="{'class1':isYes,'class2':!isYes}"
   @click="isYes=!isYes">1</div>

js的data

isYes: true,

css自定

.class1{

}
.class2{

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

桌酱

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用原生js实现多选，取消选中，以及动态切换class

qq_45018844的博客

12-06

4232

效果图多选效果的实现 <view class="item" :class="isActiveFn(item)?'active':''" v-for="(item,index) in list" :key="index" @click="getItem(item)"> {{item.name}} </view> 点击某个块通过getItem拿到值 this.listCustom是下面那个添加的框的list getItem(item) { //判断已经是否添加过

Vue2.0 实现click点击当前li，动态切换class

_夜渐凉

09-04

6464

1，文件内容为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法。看详解：https://cn.vuejs.org/v2/api/#Vue-set 这个案例需要注意的一点是：vue 中$index $key 已经移除了之前可以这样： <ul id="example"> <li v-for="i...

2 条评论您还未登录，请先登录后发表或查看评论

点击切换class并且刷新后保留样式

qq_45699034的博客

12-05

354

html <style> .ul-row{ background: #FC862E;} </style> <button class="bt-row" >点击切换</button> <div class='topNum'> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div&

vue点击样式切换（class）

m0_61900811的博客

02-28

1034

vue点击样式切换（class）

Vue 菜单栏点击切换单个class（高亮）

weixin_45609702的博客

02-18

729

ps：该方法直接切换class，不需要手动添加清除其他非动态DOM的class。

[前端] click点击切换本身的class

网站前端/PHP/Android/其他

06-16

2841

html布局： <form action="{:U('index')}" method="post"> <label class="mask-checkbox"><input type="checkbox"/>男</label> </form> css样式： <style> ...

Vue中的class动态样式切换

最新发布

qq_56785676的博客

04-11

1440

1、在HTML中的class，指的就是关于页面的样式层叠表，就是写一些样式起到美化页面的作用，并且这些样式都是静态，并且写死的，是不会改变的。2、在Vue中的:class，指的虽然也是关于页面的样式层叠表，但是它是动态的样式。是可以进行切换的。因为:class是简写的形式，正确的写法因该是v-bind:class，并且在Vue中该样式如果需要生效则必须得让条件成立，即布尔值为true才可以。

实现点击下箭头变上箭头来回切换的两种方法【推荐】

08-31

在网页设计和开发中，有时候我们需要实现一个交互效果，即点击一个下箭头图标后，该图标变为上箭头，再次点击则恢复为下箭头。这种功能在展开和收起内容、导航菜单等场景中非常常见。本文将介绍两种实现这一效果的...

CSS使用classList实现两个按钮样式的切换

12-29

classList属性的方法：add();remove();toggle();...描述，在一些页面我们需要使用两个按钮来回切换，如图：我们要使用到add()和remove()方法 html部分: <div class=login-title> 注册登陆 js部分:

vue实现菜单切换功能

10-17

在上述文档中，通过使用Vue实例来管理菜单的状态，实现了点击菜单项切换页面内容的基本功能。代码片段如下： ```html <a :class="{active: Index==1}" @click="changeNav(1)">学校新闻 ...

vue实现页面切换滑动效果

10-15

在Vue.js中实现页面切换滑动效果，可以借助Vue的内置组件`transition`以及`vue-router`来完成。`vue-router`用于处理页面间的路由跳转，而`transition`则负责过渡动画效果。以下将详细讲解如何实现这一功能。首先...

jquery点击改变class并toggle

12-11

jquery点击改变class并toggle

切换:class

weixin_41813243的博客

03-26

262

<div class="winitem" v-for="(ite,index) in compid" @click="changewin(ite.id,index);" :class="activeIndex === index ? 'activeIndex':''"> {{ite.name}} </div> data： activeIndex: 0, 方法： this.activeIndex = index;

:class的使用及通过:class实现标签切换状态改变

米拉

06-25

5068

做一个点击标签切换的功能，效果如下： JS：当然也可以酱紫写： JS：二、点击标签加载相应标签的内容： HTML： CSS： JS：三、三状态切换：一般用于可选/不可选/选中三种情况: Css: JS: 四、更多状态结合： HTML： CSS： JS：附：:class的使用(官方文档) 1、:class="变量名"，一般是直接绑定一个类名2、:class = "{ 类名:布尔值 }"

使用css实现点击切换效果

weixin_30510153的博客

02-02

4409

使用css制作简单的点击切换效果，参考了以下教程：css实现的轮播和点击切换(无js版) 首先先制作一个容器，用来容纳所显示的内容： HTML代码： <html></html> <head> <meta charset="utf-8"> <link href="css/test.css...

当前点击处更改class显示样式

凉酱的博客

12-24

491

实现效果：点击到哪里哪里会显示.active里的样式 html部分 <div class="type_item" :class="{ active:index==typeActive }" v-for="(item, index) in itemList" @click="changeTypeColor(index)">{{item.text}}</div> js data() { return {

html中加入点击事件,html中的点击事件

weixin_39528366的博客

06-02

1650

使用点击事件写一个计数器。onmouseup ：当鼠标按下，松开的时候触发事件。onmousedown：当鼠标按下的时候触发事件。onMouseOver: 鼠标经过时触发onMouseOut: 鼠标移出时触发onMouseMove: 鼠标移动时触发，这个只要在对应的地方移动就会触发onclick: 鼠标点击时触发，包含按下与松开两个动作。通过以下实例来观察onmouseup与...

class触发后让另一个class加样式_全新全“E”！体验奔驰新款E-Class运动版

weixin_39624367的博客

12-09

220

奔驰E-Class是中大型车市场重要的组成部分，甚至可以说在这个级别，其市场规则以及技术水准，就是由奔驰E-Class、宝马5系和奥迪A6一起制定的。目前在售的这一代奔驰E-Class可以说是目前为止在国内市场最成功的一代车型，不只是外观设计神似S-Class，针对性的加长轴距也同样功不可没。随着主要对手相继换代或者改款，这代E-Class的改款车型也迅速来到国内市场。改款后的E-Class仍旧分...

下拉菜单切换，点击旋转，再点击恢复初始状态

qq_43676606的博客

07-23

1107

大概的代码 $(function () { $(".btn").click(function () { (this).css("transform","rotate(90deg)");//varsub=(this).css("transform","rotate(90de...

Vue3中两个按钮样式来回切换

05-16

在data属性中声明一个布尔变量来表示按钮样式的切换状态，然后使用v-bind绑定class来动态修改按钮的样式。以下是一个简单的示例代码： ``` <button :class="{ active: isActive }" @click="toggleActive">...