Vue点击当前元素添加class 去掉兄弟的class

<div id="app">
<ul>
<li v-for="(todo, index) in todos" v-on:click="addClass(index)" v-bind:class="{ blue:index==current}">{{ todo.text }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
current:0,
todos: [
{ text: '选项一' },
{ text: '选项二' },
{ text: '选项三' }
]
},
methods:{
addClass:function(index){
this.current=index;
}
}
})
Vue点击当前元素添加class 去掉兄弟的class的更多相关文章
- vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字
点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...
- vue 点击当前元素添加class 去掉兄弟的class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- vue不同序号的元素添加不同的样式
vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...
- jquery实现点击进行跳转后,改点击的元素添加选中的效果
<style> .active { color: red; } </style> //html代码 <ul id="tab2"> <li& ...
- vue 点击当前元素改变样式
template <ul> <li v-for="(relation,index) in relations" v-bind:id="relat ...
- vue.js实现点击后动态添加class及删除同级class
最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还 ...
- vue中点击添加class,双击去掉class
VUE中 html 中 <ul id="shoppingList" v-on:click="addClass($event)" class="i ...
- 在vue中的点击事件怎么获取当前点击的元素
首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “click ...
- Vue中,给当前元素添加类名移除兄弟元素类名的方法
在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...
随机推荐
- 高可用Keepalived+LVS搭建流程
本流程搭建1个master,1个backup节点的Keepalived,使用lvs轮询2个节点的服务. 一.使用版本 CentOS 7.7 Keepalived 1.3.5 ipvsadm 1.27( ...
- Jira使用说明文档
1 建立项目 1.1 权限归属 Jira系统管理员 1.2 执行内容 建立项目.工作流分配调整.制定项目负责人及默认经办人 1.3 建立项目过程 登录使用Jira系统管理员 ...
- Simulink仿真入门到精通(十一) 模块的封装
当用户编写了自定义的S函数或者使用Simulink标准库中的模块搭建子系统后,可以通过封装为其设计显示外观,追加参数对话框. 封装是构建一个以对话框为接口的交互界面的过程,它将复杂的模块逻辑关系隐藏起 ...
- python网络协议
一 互联网的本质 咱们先不说互联网是如何通信的(发送数据,文件等),先用一个经典的例子,给大家说明什么是互联网通信. 现在追溯到八九十年代,当时电话刚刚兴起,还没有手机的概念,只是有线电话,那么此时你 ...
- java原子操作CAS
本次内容主要讲原子操作的概念.原子操作的实现方式.CAS的使用.原理.3大问题及其解决方案,最后还讲到了JDK中经常使用到的原子操作类. 1.什么是原子操作? 所谓原子操作是指不会被线程调度机制打断的 ...
- 为了弄懂Flutter的状态管理, 我用10种方法改造了counter app
为了弄懂Flutter的状态管理, 我用10种方法改造了counter app 本文通过改造flutter的counter app, 展示不同的状态管理方法的用法. 可以直接去demo地址看代码: h ...
- EPX-Studio操作多线程的方法
procedure TF1167908962.Button1Click(Sender: TObject); begin ThIndex := ; EPXThread1.StartThread; EPX ...
- qt creator源码全方面分析(3-5)
目录 qtcreatorlibrary.pri 使用实例 上半部 下半部 结果 qtcreatorlibrary.pri 上一章节,我们介绍了src.pro,这里乘此机会,把src目录下的所有项目文件 ...
- Fiddler2 下断点修改HTTP报文
一 Fiddler中设置断点修改HTTP请求 方法1:全局断点.Rules-->Automatic BreakPoint-->Before Requests(或快捷键F11),这种方法会拦 ...
- MyBatis框架——延迟加载
延迟加载也叫惰性加载或者懒加载,使⽤延迟是为了提⾼程序的运⾏效率,具体是通过尽量少执⾏ SQL 语句来提升效率.Java 程序与数据库的交互频率越低越好,MyBatis 提供的延迟加载功能就可以做到这 ...