在Vuejs里使用index对第一项添加class

这次给大家带来在Vuejs里使用index对第一项添加class,在Vuejs里使用index对第一项添加class的注意事项有哪些,下面就是实战案例,一起来看一下。

(1)在v-for中,利用index来对第一项添加class

在CODE上查看代码片派生到我的代码片

登录后复制

index来源于v-for,i表示遍历的数组的元素,index表示索引。

由于index从0开始,因此如果要指定第一项有active这个类,那么就用v-bind:class=”{‘active’:!index}”

第一项原本是false(0),第二项和之后是true(>0),通过逻辑非操作符,让其值反转。

因此,第一项有active这个类,而后面的没有。

如果除了第一项之外有某个类,也可以通过不加逻辑非操作符来达到。

类似的,可以用index==2这样的表达式来让第三项获得这个类。

注意,我的版本是Vuejs2.0,因此貌似不能用$index来替换。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

在vue中post传参数为null如何处理

axios发送post请求springMVC无法接受参数如何处理

以上就是在Vuejs里使用index对第一项添加class的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2773485.html

(0)
上一篇 2025年3月8日 13:51:33
下一篇 2025年3月1日 22:35:46

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 常见的前端JS算法总结

    本篇文章给大家分享的内容是常见的前端JS算法总结,有着一定的参考价值,有需要的朋友可以参考一下 排序算法 1、冒泡排序 function bubbleSort(arr){   var i = 0,      j = 0;    for(i=…

    编程技术 2025年3月8日
    200
  • 实现文件上传的AjaxUpLoad.js

    这次给大家带来实现文件上传的AjaxUpLoad.js,使用实现文件上传AjaxUpLoad.js的注意事项有哪些,下面就是实战案例,一起来看一下。 1、创建页面并编写HTML 上传文档:  登录后复制 上传图片:  登录后复制 2、引用A…

    编程技术 2025年3月8日
    200
  • Vue.js的ul-li标签如何仿制select标签

    这次给大家带来Vue.js的ul-li标签如何仿制select标签,Vue.js的ul-li标签如何select标签注意事项有哪些,下面就是实战案例,一起来看一下。 目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉…

    编程技术 2025年3月8日
    200
  • vue.js中Axios的概念以及使用方法

    本篇文章给大家分享的内容是vue.js中Axios的概念以及使用方法,有着一定的参考价值,有需要的朋友可以参考一下     1.什么是axios    https://www.kancloud.cn/yunye/axios/234845这是…

    2025年3月8日
    200
  • 几种js中this函数的调用方式

    javascript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式。函数有以下几种调用方式:作为对象方法调用、作为函数调用、作为构造函数调用、apply或call调用。 对象方法调用 作为对象方…

    编程技术 2025年3月8日
    200
  • js数组去重以及如何判断出字符串出现次数最多的字符

    本篇文章给大家分享的内容是s数组去重以及如何统计字符串出现最多的字符的代码分享,有着一定的参考价值,有需要的朋友可以参考一下 数组去重: 数组去重function test(str){ let len = str.length; let s…

    编程技术 2025年3月8日
    200
  • 5个关于JavaScript数组的迭代方法

    本篇文章给大家分享的内容是5个关于JavaScript数组的迭代方法,有着一定的参考价值,有需要的朋友可以参考一下 ECMAScript5为数组定义了5个迭代方法。每个方法都接受两个参数:要在每一项运行的函数和(可选的)运行函数的作用域对象…

    编程技术 2025年3月8日
    200
  • 源生JS怎样实现todolist功能

    这次给大家带来源生JS怎样实现todolist功能,源生JS实现todolist功能的注意事项有哪些,下面就是实战案例,一起来看一下。 该项目主要可以练习js操控dom,事件,事件触发之间的逻辑关系,以及如何写入缓存,获取缓存。 主要功能:…

    编程技术 2025年3月8日
    200
  • 深入了解vue.js 之watch用法

    本篇文章给大家分享的内容是深入了解vue.js 之watch用法,有着一定的参考价值,有需要的朋友可以参考一下 watch: 观测vue实例上的数据变动,对应一个对象, 键:就是需要监测的那个东西, 值: 1.可以是当键变化时执行的函数,有…

    编程技术 2025年3月8日
    200
  • Immutable.js怎样实现撤销重做效果

    这次给大家带来Immutable.js怎样实现撤销重做效果,Immutable.js实现撤销重做效果的注意事项有哪些,下面就是实战案例,一起来看一下。 浏览器的功能越来越强大,许多原来由其他客户端提供的功能渐渐转移到了前端,前端应用也越来越…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论