在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. [算法练习]Excel Sheet Column Title

    题目: Given a positive integer, return its corresponding column title as appear in an Excel sheet. For ...

  2. integer storage and decimal storage differences in java

    package storage.java; public class StorageJava { public static void main(String[] args) { byte b = 1 ...

  3. 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)

    问题描述: 有时候使用 apt-get 终端提示这样的错误信息: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/ ...

  4. android.view.WindowLeaked的解决办法

    按字面了解,Window Leaked大概就是说一个窗体泄漏了,也就是我们常说的内存泄漏,为什么窗体会泄漏呢? 产生原因: 我们知道Android的每一个Activity都有个WindowManage ...

  5. CSS3 transition介绍

    transition从效果上看是一种平滑过渡的动画,本质上是在线性时间内将属性从开始值过渡到结束值.例如获得焦点,点击鼠标等动作导致CSS属性值的变化是瞬间完成的,感觉有点生硬.用transition ...

  6. jquery使页面滚动到底部

    function scrollToEnd(){//滚动到底部 var h = $(document).height()-$(window).height(); $(document).scrollTo ...

  7. iOS设计模式 - 桥接

    iOS设计模式 - 桥接 示意图 说明 1. 桥接模式为把抽象层次结构从实现中分离出来,使其可以独立变更,抽象层定义了供客户端使用的上层抽象接口,实现层次结构定义了供抽象层次使用的底层接口,实现类的引 ...

  8. [翻译] ASCScreenBrightnessDetector

    ASCScreenBrightnessDetector ASCScreenBrightnessDetector lets you easily detect screen brightness cha ...

  9. windows 下 gdb 的安装

    在 windows 下 gcc/g++ 的安装 这篇文章中已经提到,用MinGW Installation Manager可以方便地管理 MinGW 组件,因此使用该软件安装 gdb . 打开 Min ...

  10. Win10 mysql容器启动命令

    docker run --name mysql -it -p : -e MYSQL_ROOT_PASSWORD=Hongfund5013 -e MYSQL_USER=hongfund_os -e MY ...