vue.js 点击div标签时改变样式

最新推荐文章于 2024-09-20 11:35:39 发布
最新推荐文章于 2024-09-20 11:35:39 发布
阅读量1.9w 收藏 30
点赞数 8
分类专栏： Vue.js 项目实战经验 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39089928/article/details/88293404
版权
本文介绍了如何在Vue.js中通过点击事件改变div的样式，包括使用v-for循环展示数据，动态绑定:class来切换样式，并提供了一个完整代码示例，实现了列表项的点击选中和取消选中效果。
摘要由CSDN通过智能技术生成

1.点击某一项后样式发生改变（循环列表的每一项的样式改变）

效果图

 

v-for循环展示productType中的数据

：class动态绑定样式表中.changeStyle的样式，将当前索引传递给changeSelectStyle

@click点击事件触发函数changeStyle(),并将当前索引传递进去。

<ul v-for="(item,index) in productType" :key="index">
   <li  class="type-name" :class="{changeStyle:changeSelectStyle == index}" 
                         @click="changeStyle(index)"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
吴小花的博客
关注
专栏目录
订阅专栏
Vue2.0点击切换类名改变样式的方法
12-10
1、使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue导航</title> <style media="screen"> *{ margin:0; padding: 0; } ul li{ list-style:
vue.js绑定class和style样式（6）
12-29
因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 通过 v-bind:class 或者 :class 来为style或者class来绑定 绑定class <div class=test> ...
vue中点击导航栏，动态改变样式，经典写法
qq_44849312的博客
08-18 446
第一个样式为 itemclass，第二个样式要看 indexItem== index 这个表达式是否成立，如果成立，则加入 active样式，表示激活状态，在vue中，我们通常会有这样的情况，在多个子模块之间，点击其中一个子模块，修改当前点击的子模块的样式。indexItem == index 就是当前这个模块，是否等于激活状态下的模块，如果是，添加active属性，修改背景色。我们要实现想要的效果，还需要结合静态样式，因为静态样式用来渲染其它未激活状态的子模块，动态样式用来渲染激活状态的子模块。
在vue中:style 的几种使用方式
最新发布
飞翔༒之翼
09-20 2376
在日常开发中:style的使用也是比较常见的：亲测有效。
vue踩坑之路--点击按钮改变div样式
alexhunter2010的博客
03-30 2018
有时候，我们在做项目的时候，想通过某个按钮来改变某个div样式，那么可以通过以下代码实现： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
在vue中点击按钮改变div样式
big_beer的博客
04-14 4171
目标： 如何点击按钮触发事件，改变div的颜色（样式） 方法： 通过三目运算符判断选择那个样式： 代码： <!doctype html> <html> <head> <title>div点击按钮改变样式</title> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue"></script
vue 点击选中改变样式
Y273849的博客
05-20 634
data里 isActive:-1, method里 checkedItem(index){ this.isActive=index; }, 页面里 <div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)>{{item.name}}</div>
vue点击时动态改变样式
热门推荐
katydids的博客
11-07 2万+
vue点击时动态改变样式 template中 &lt;li :class="{ active:index==isActive }" @click="changeValue(index)" v-for="( item , index ) in items" :key="item.CategoryId"&gt;{{item.Categor...
vue.js-div滚动条隐藏但有滚动效果的实现方法
10-18
在Vue.js中隐藏div的滚动条但保留滚动功能，可以通过CSS来实现滚动条的隐藏，并利用JavaScript来捕获用户的滚动动作，进而通过程序来控制内容区域的滚动，以此来模拟滚动条的效果。由于某些浏览器可能对滚动条有不同...
一、Vue.js入门.md
12-22
- **`v-cloak`**: 防止页面加载时显示 `{{ }}` 标签中的表达式，直到 Vue 实例准备好渲染页面。 以上是 Vue.js 基础入门所需要了解的关键概念和技术点。通过理解这些基础知识，你可以开始使用 Vue.js 构建自己的...
Vue.js标签页组件使用方法详解
10-16
`methods`包含了`handleChange`方法，用于处理标签点击事件，改变当前选中的标签页。 ```javascript Vue.component('tabs', { template: /* ... */, props: { value: { type: [String, Number] } }, data() { ...
vue点击按钮改变按钮样式
weixin_45587783的博客
11-29 4274
【代码】vue点击按钮改变按钮样式。
vue点击按钮切换样式
qq_57305148的博客
02-16 1万+
点击全部 切换样式 给一个click点击事件，动态样式绑定两个class（vue官网：绑定class的对象语法） <view class="type round-15" @click="whole" :class="{type:ys1,type_tips:ys2}">全部</view> 用true和false判断 ys1:true, ys2:false, 方法： whole(){ // 当点击第一次时，ys1从true变为false,Style样式type就会隐藏 // 再
vue项目点击元素后改变样式
u013437812的博客
04-15 1万+
一、点击元素都改变其样式的步骤 示例：想实现点击产品名称时其颜色变为蓝色： 点击前： 点击后样式改变： 二、使用步骤 1.在template显示的数据中添加单击事件和样式绑定： 代码如下（示例代码为uniapp）： <view class="z-tr" v-for="(item,index) in productList" :key="item.id"> <view class="z-td">{{index + 1 }}</view> <view c
Vue 点击li动态改变元素样式
xiaoqingqing的博客
09-17 5265
一、问题描述 为了实现点击侧边栏中一项，改变当前选中项的背景图片效果。原本使用循环遍历清除样式再单独添加样式可以实现，但是总感觉会有更简洁的方式实现。今天找到了方法，故而小小记录一下。 template对应内容 <ul> <li class="siderBarItem" v-for="item in sideBarItems" :key="item.value" :value="item.value" @click="goToProductOption(ite
【Vue实战】使用vue实现点击按钮，改变被点击按钮的样式。
在热爱技术的路上一直前行。
06-25 7221
2.2 实现效果
vue点击时动态改变样式 ------- 最简单的方法
weixin_30721899的博客
11-12 849
vue点击时动态改变样式template中 <li :class="{ active:index==isActive }" @click="changeValue(index)" v-for="( item , index ) in items" :key="item.CategoryId">{{item.CategoryName}}</li> da...
vue 选中切换样式
weixin_53816836的博客
06-22 600
在view内写入 判断语句 sty 和 sty1 都是view框的样式sty是选中前框的样式，sty1是选中后框的样式。font_1为选中前字体样式，.sty .font_2为选中后字体样式。），然后将两个样式名都写到相应的class里面。两个名字中间有一个空格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吴小花的博客

1分也是爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值