vue循环内容，触发某条内容添加样式

最新推荐文章于 2022-02-21 15:00:28 发布
最新推荐文章于 2022-02-21 15:00:28 发布
阅读量308 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37142141/article/details/101364829
版权

话不多说，直接上代码

 <li
          v-for="(item, index) in orderListArr"
          @click="selectGoods(item, index)"
          :class="activeIndex == index ? 'active' : ''"
        >

js

    selectGoods(item, index) {
      this.activeIndex = index;
    },

 

小飞侠_2018
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 （Vue.js）实现 购物车功能（包含全选、分类、删除）
weixin_43748615的博客
02-14 1817
在当前示例的基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价 同时提供一个全选的按钮。 思路： 添加input元素，为其属性checked赋予动态变量，变量可在商品属性中增加一个值加以判断. 通过判断checked属性的值，确定是否添加计算到总价. 全选：也是通过添加input元素和判断checked属性，不同的是，增加其与物品的联系。 全选思考：首先是点击全选本身...
vue2.0 可折叠列表 v-for循环展示的实例
10-18
使用`<style scoped>`标签添加CSS样式，这里的样式只对当前组件生效，避免了全局样式污染。定义了一些基本布局样式，如`.sheet-list`、`.sheet-header`、`.sheet-content`等，以及图标和文字的位置。 7. **组件化*...
Vue常用指令
一只前端小白的博客
04-03 1879
vue声明式渲染： 采用模板语法来声明式的将数据渲染进Dom <div id="app"> <h1>{{msg}}<h1> </div> new Vue({ el:"#app", data:{ msg:"hello Vue", } }); //渲染结果会将h1中的文本渲染成hello Vue 指令： v-bind指令（简写为“:”）：用...
VUE——数组遍历与样式设定
qq_38996246的博客
08-12 2498
本次笔记主要记录vue中数组的嵌套遍历。 &lt;div id="app"&gt;             &lt;ul&gt;                 &lt;li v-for="(item,key) in list1" :class="{'red':key==0}"&gt;{{item.kind}}                 &lt;ul&gt;          
vue——如何给v-for循环出来的元素设置不同的样式
weixin_44613294的博客
01-23 1万+
例如给循环出来的四个盒子设置不同的背景色 第一步：给要循环的盒子动态绑定class名 并且传入一个数组 &amp;lt;div v-for=&quot;(i,a) in serve&quot; class=&quot;sever_box2&quot;&amp;gt; &amp;lt;div :class=&quot;sstt[a]&quot;&amp;gt; &a
vue中v-for循环时只处理事件触发项的内容（仅一项）
ColourfulTiger的博客
06-05 9647
关于怎样处理vue中v-for循环时对循环内容中单独的一项的事件处理有如下方案：（1）获取v-for循环内容中的下标值（val为navContent中的内容，index为下标）        &lt;p v-for="(val,index) in navContent" class="nav"&gt;            {{val}} --{{index}}     &lt;i ...
vue 自定义右键样式的实例代码
10-16
3. **自定义右键菜单样式和内容**： - 创建一个组件 `right_menu.vue`，用于渲染自定义的右键菜单。这个组件需要接收 `x` 和 `y` 坐标作为参数，用于定位菜单，以及 `showMenu` 参数，控制菜单的显示和隐藏。 - 在...
liMarquee.zip vue无缝滚动插件
11-27
在 Vue 应用中，有时候我们需要实现元素的无缝滚动效果，比如新闻滚动条、广告轮播等，这就是“vue滚动”这一标签所涵盖的内容。而“liMarquee.zip”则提供了一个针对Vue的无缝滚动插件，帮助开发者轻松实现这个功能...
vue国家区号选择组件
01-07
4. 模板语法：使用Vue的模板语法，如条件渲染 (`v-if/v-else`) 和循环渲染 (`v-for`)，来展示国家列表。 5. 插槽：如果组件设计得足够灵活，可能会有一个插槽，允许父组件自定义选择按钮或其他部分的呈现方式。 ...
vue刻度尺组件
08-14
8. **插槽（Slots）**：Vue的插槽功能允许用户在组件内部插入自定义内容，例如在刻度尺上方或下方添加额外的标签或提示信息。 9. **模块化（Modularity）**：为了代码的可维护性和复用性，组件可能被设计为模块化的...
vue项目去除多余的样式
岁月如歌去，十年弹指间
06-11 5833
vue项目去除多余的样式 随着项目越来越大，书写的不注意，不自然的就会产生一些多余的 css，小项目还好，一旦项目大了以后，多余的 css 会越来越多，导致包越来越大，从而影响项目运行性能，所以有必要在正式环境去除掉这些多余的css，这里推荐一个库purgecss，支持 CLI、JavascriptApi、Webpack 等多种方式使用，通过这个库，我们可以很容易的去除掉多余的 css。 ...
vue点击事件改变样式_Vue友们就靠这6个开发技巧了（建议收藏）
weixin_39554021的博客
12-12 5879
前言在平时的开发中，我们用vue可能很久了，但是对于有的新特性或者技巧没有发现，本文就带着大家一起看看常用的vue技巧。(温馨提示：代码片段点击图片阅读体验更佳噢！)一、状态共享随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Obse...
VUE循环 排序 多条件判断添加样式
PanDa____的博客
02-21 1462
1.使用v-for对数据进行渲染并按照语文成绩从高到低进行排序 <div id="sorting"> <table> <tr v-for="(item,index) in sortScore"> <td>{{index}}</td> <td>{{item.name}} </td
循环输出的数据去掉最后一个div的下边框
weixin_41987365的博客
05-22 2747
last-of-type 相当于是一个定位，可以定位到最后一个news_info的div，然后在写自己想要的样式就可以了
为每一个 v-for循环出来的添加点击事件思路
weixin_43755104的博客
07-30 1963
文章目录 思路 首先在data中写入对象数组，并且写个可以if判断的标志 如下图 upFlag是个标志，action也是个标志 当action: 0是一个状态，action:1是另一个状态 当状态改变时发生什么事件，例如改变背景色，切换显示不同的div，切换背景图片， 改变背景颜色是:class不同的样式，显示不同的div是用v-if判断是true还是false来进行展示，换背景图片与切换显示一样无非就是切换显示不同的img, 切换不同的背景颜色一般用到的是3元表达式，当标志为1或者为0时绑定不同
vue 动态添加样式
热门推荐
liuxing393724034的博客
06-15 2万+
vue实现点击切换改变样式 html代码：根据数据动态循环一个列表 &lt;ul&gt; &lt;li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)"&gt;{{list}}&
(业务1)vue v-for循环的时候怎么给点击项加上样式
weixin_39818813的博客
05-24 1554
需求： vue循环出来的价格区间表，点击一个价格区间就会筛选相应的商品，同时该区间价格数字会变颜色 首先设置一个变量priceChecked，点击当前项时就把当前项的index赋值给priceChecked 然后给每一项一个动态的class，如果priceChecked和当前项的index匹配的话，设置cur类名(cur定义了橙色字体)， 由于上面的赋值操作，点击哪一项哪一项的c...
遍历一个数据去掉最后一个元素的样式
马优晨
03-31 6381
这是我们常见的一个问题： 如图所示 我们遍历了一个数组或者对象，给每个元素加了一个border，结果最后一个元素也有border。但是实际上。我们是需要去掉这个最下面元素的边框的。 实现的效果应该是这样子的，最下面的元素没有边框。 这里我写了一个demo，大家可以参考一下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;h...
vue日历带假期及自定义内容
最新发布
09-06
总结起来，实现Vue日历带假期及自定义内容可通过以下几个步骤来完成：定义起始日期和结束日期，保存假期列表，使用v-for和插槽slot循环遍历日期并展示相应的内容和样式，通过事件处理函数实现交互功能。整个实现过程...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值