Vue中，给当前元素添加类名移除兄弟元素类名的方法
在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中，给当前元素添加类名移除兄弟元素类名的方法的更多相关文章
- jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...
- Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...
- VUE中让由全局变量添加生成的新数组不随全局变量的变化而变化
问题场景: const addOptions = { singleOrComplex, totalNum: this.smallTotalPrice, selectList: this.purchas ...
- 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 ...
- vue中v-bind:class动态添加class
1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
- vue中，svg图标添加click事件，部分浏览器不生效
vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...
- Vue中通过v-for动态添加图片地址
由于组件化问题,webpake在打包以后,src目录下的assets里面存放的img图片,路径已经更换.很多入坑的前端程序员在使用的时候,可能专破头也弄不清地址是什么个情况: 这里在使用vue-cli ...
- vue中this.$router.push()路由传值和获取的两种常见方法
1.路由传值 this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...
随机推荐
- 在IE、fixfox、chrome等浏览器中ajax提交成功后，打开新标签页面被浏览器拦截问题[转]
如题: 在项目中要在当前页面中,再新开一个页面, 新开页面的地址是ajax请求后返回的url --------- 试了,浏览器提示组织弹窗..... 网上找,找到了一个处理方式,思路是 1. 先打开一 ...
- Android深入四大组件（五）Android8.0 根Activity启动过程（后篇）
前言 在几个月前我写了Android深入四大组件(一)应用程序启动过程(前篇)和Android深入四大组件(一)应用程序启动过程(后篇)这两篇文章,它们都是基于Android 7.0,当我开始阅读An ...
- JavaScript 模块化入门
理解模块 模块打包构建 webpack牛刀小试
- spring事务的理解
特性 一致性:业务处理要么都成功,要么都失败,不能部分成功不分失败 原子性:业务操作是由多个动作完成,这些动作不可分割,要么都执行,要么都不执行 隔离性:事务间之间要做隔离,不要互相影响 持久性:操作 ...
- SSH 无法启动的原因分析及解决方法
简介 Secure Shell(缩写为 SSH),由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为一项创建在应用层和传输层基础上的安全协议,为计算机上的 S ...
- [NCH 1, 3]
Preview: 1. Implement strStr() O(m*n): class Solution { public: int strStr(string haystack,string ne ...
- Java学习---JAVA的类设计
基础知识 JAVA是由C/C++语言发展而来的纯面向对象语言,其基本元素包括:简单数据类型 和 复合数据类型(即类).类是对客观事物的抽象描述,它有面向对象的四个特点,即:封装性.继承性.多态性和通信 ...
- metasploit 渗透测试笔记(meterpreter篇)
0x01 背景 meterpreter作为后渗透模块有多种类型,并且命令由核心命令和扩展库命令组成,极大的丰富了攻击方式. 需要说明的是meterpreter在漏洞利用成功后会发送第二阶段的代码和me ...
- GTK+开发环境搭建
GTK+开发环境搭建 "工欲善其事,必先利其器"首先介绍一下GTK+开发环境的搭建,网上很多所谓的GTK的开发环境的搭建基本都是抄来抄去,也不知道有没有人使用他们介绍的方法搭建并编 ...
- Linux CPU的中断【转载】
中断其实就是由硬件或软件所发送的一种称为IRQ(中断请求)的信号. 中断允许让设备,如键盘,串口卡,并口等设备表明它们需要CPU. 一旦CPU接收了中断请求,CPU就会暂时停止执行正在运行的程序,并且 ...