在Vue中，给当前元素添加类名移除兄弟元素类名的方法

  • 今天在项目中需要做一个效果，点击对应的li改变当前的color，其他的li取消颜色，在jQuery中这很容易，由于之前已经引入了jQuery，所以直接想到了这个办法。

  • 但是出于未知的原因，jQuery获取不到v-for出来的数据，根本找不到dom节点，所以不得不改变思路。

  • 然后我想到了V-bind的方法。下面贴上步骤。

  • 1.在data里面申明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）

 current: '0', 如果不想默认被选中，就把值设为一个超出所有元素length的数字
  • 2.在当前元素中添加动态class： “:class”，根据vue的class和style的绑定特性写出类似“v-bind:class="{ classred:index==current}"”，当然其他方法很多，可以根据文档自行选择
<ul class="list">

        <li v-for="(item,index) in list" :key="index" @click="handleList(index)" :class="{red:index==current}">{{item.name}}</li>

        ‘red’是你要给的类名

      </ul>
  • 3.给元素点击事件，传入当前元素的index，把元素当前的index赋值给data里面的申明的属性
 handleList (index) {

      this.current = index;

    },

大功告成！

-这样就可以点击实现类似于jQuery的 xxx.addClass('class').siblings().removeClass('class')的效果了

 <!DOCTYPE html>

2. <html>

3. <head>

4. <title>Vue如何加class</title>

5. <meta charset="utf-8"/>

6. <style type="text/css">

7. .classred{

8. color:red;

9. }

10. </style>

11. </head>

12. <body>

13. <div id="app">

14. <ul class="list">

15. <li v-for="(item,index) in liList" v-on:click="addClass(index)" v-bind:class="{ classred:index==current}">{{item.title}}</li>

16. </ul>

17. </div>

18. <script src="./vue.min.js"></script>

19. <script type="text/javascript">

20. var vm = new Vue({

21. el: '#app',

22. data: {

23. name:'成步堂',

24. current:0,

25. liList:[

26. {title:'哈哈'},

27. {title:'阿昂'},

28. {title:'呜呜'},

29. {title:'来啦'}

30. ]

31. },

32. methods:{

33. addClass:function(index){

34. this.current=index;

35. }

36. },

37. mounted: function() {}

38. })

39. </script>

40. </body>

</html>

Vue中，给当前元素添加类名移除兄弟元素类名的方法的更多相关文章

  1. jquery获取元素（父级的兄弟元素的子元素）

    一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...

  2. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  3. VUE中让由全局变量添加生成的新数组不随全局变量的变化而变化

    问题场景: const addOptions = { singleOrComplex, totalNum: this.smallTotalPrice, selectList: this.purchas ...

  4. Vue 中提示报错 handlers[i].call is not a function解决方法

    Vue 中提示警告 TypeError: handlers[i].call is not a function at callHook (vue.esm.js?a026:2921) at Object ...

  5. vue中v-bind:class动态添加class

    1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...

  6. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  7. vue中，svg图标添加click事件，部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  8. Vue中通过v-for动态添加图片地址

    由于组件化问题,webpake在打包以后,src目录下的assets里面存放的img图片,路径已经更换.很多入坑的前端程序员在使用的时候,可能专破头也弄不清地址是什么个情况: 这里在使用vue-cli ...

  9. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...

随机推荐

  1. can't start Git: git.exe

    can't start Git: git.exe :不能启动Git 这是因为Git的可执行文件的路径不正确,需要手动设置,. 找到设置Git的窗口 然后修改一下路径就行了 点击OK就可以了.

  2. 01_Netty简述

    [Netty的NIO模型与常见的NIO模型对比] [原始的BIO模型] ServerSocket serverSocket = Socket clientSocket = serverSocket.a ...

  3. Python - Exceptions

    官方文档:https://docs.python.org/3/library/exceptions.html 1. 使用try...except... 2. 输出错误信息的方式为: try: curs ...

  4. Node.js 常用 API

    Node.js v6.11.2  Documentation(官方文档) Buffer Prior to the introduction of TypedArray in ECMAScript 20 ...

  5. TCP协议 状态解析和状态统计

    一.三次握手和四次挥手 1.建立连接(三次握手)   (1)服务器会处于listen状态,客户端发送一个带SYN标志的TCP报文到服务器.   (2)服务器端回应客户端的请求,这是三次握手中的第2个报 ...

  6. SVG坐标系统和transformation彻底理解

    翻译自https://sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像传统的HTML elements一样受制于css box model.这 ...

  7. 使用TFHpple解析html

    使用TFHpple解析html https://github.com/topfunky/hpple 前期准备工作 引入静态库文件 添加库文件的 header search paths(注意,必须选中 ...

  8. Linux NFS 详解

    目录:      1.了解NFS服务      2.NFS主要文件      3.NFS安装      4.NFS配置     5.NFS客户端配置 6.固定NFS端口      7.Windows挂 ...

  9. August 05th 2017 Week 31st Saturday

    All endings are beginnings, we just don't know it at the time. 所有的结局都是新的开始,只是当时我们不知道而已. Several mont ...

  10. [日常] NOIWC2019 冬眠记

    NOIWC 2019 冬眠记 辣鸡rvalue天天写意识流流水账 Day 0 早上没有跑操(极度舒服.png) 和春哥在博客颓图的时候突然被来送笔电的老爹查水表(捂脸) 母上大人骗我说这功能机不能放存 ...