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,所以 ...
随机推荐
- Flutter保持页面状态AutomaticKeepAliveClientMixin
使用bottomNavigationBar切换底部tab,再切换回来就会丢失之前的状态(重新渲染列表,丢失滚动条位置). 解决方法 使用 AutomaticKeepAliveClientMixin 重 ...
- 一起了解 .Net Foundation 项目 No.19
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Salesforce To ...
- Simulink仿真入门到精通(十四) Simulink自定义环境
14.1 Simulink环境自定义功能 sl_sustomization.m函数是Simulink提供给用户使用MATLAB语言自定义Simulink标准人机界面的函数机制.若sl_sustomiz ...
- celery异步任务 定时任务
以前项目中用到过 celery ,但是没怎么记笔记,现在在记一下,方便以后用. Celery.png 问:Celery 是什么? 答:Celery 是一个由 Python 编写的简单.灵活.可靠的 ...
- 用shell脚本实现定时备份数据库
1.备份数据库的方法 可以使用命令查看 ls /usr/local/mysql/bin 这个mysqldump就是系统内置的用来备份数据库的工具. 2.实现方法 ①先随便进入一个位置创建一个目录 ② ...
- C++ 动态链接库 dll的加载
//首先生成一个my.dll项目,在cpp中添加如下代码 //导出函数 _declspec(dllexport) int test(int a, int b) { return a + b; } // ...
- webstorm 开新项目 setting 设置@目录别名 add @ (languages & Framewors - Javascript - Webpack 4. setting eslint enable
webstorm 开新项目 setting 设置@目录别名 add @ (languages & Framewors - Javascript - Webpack 4. setting esl ...
- MySQL数据备份及还原(一)
关于删库跑路的事故现在已经屡见不鲜了,数据备份的必要性是企业数据管理极其重要的一项工作.关于数据备份.恢复也有很多场景及方法,本系列也会将主要的几种工具通过案例进行演示. 本系列将从逻辑备份及恢复开始 ...
- 大数据软件安装之Flume(日志采集)
一.安装地址 1) Flume官网地址 http://flume.apache.org/ 2)文档查看地址 http://flume.apache.org/FlumeUserGuide.html 3) ...
- Python异常处理,将异常写入到一个文件
'''定义一个函数func(urllist) urllist:为URL的列表,例如:['http://xx.com','http://www.xx.com','http://www.xxx.com'. ...