<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的更多相关文章

  1. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  2. vue 点击当前元素添加class 去掉兄弟的class

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. vue不同序号的元素添加不同的样式

    vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...

  4. jquery实现点击进行跳转后,改点击的元素添加选中的效果

    <style> .active { color: red; } </style> //html代码 <ul id="tab2"> <li& ...

  5. vue 点击当前元素改变样式

    template  <ul>    <li v-for="(relation,index) in relations" v-bind:id="relat ...

  6. vue.js实现点击后动态添加class及删除同级class

    最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还 ...

  7. vue中点击添加class,双击去掉class

    VUE中 html 中 <ul id="shoppingList" v-on:click="addClass($event)" class="i ...

  8. 在vue中的点击事件怎么获取当前点击的元素

    首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “click ...

  9. Vue中,给当前元素添加类名移除兄弟元素类名的方法

    在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...

随机推荐

  1. oracle的wm_concat函数实现行转列

    有以下数据 deptname phone username isboss 部门A 电话1 员工A 0 部门A 电话1 领导A 1 部门B 电话2 员工B 0 部门B 电话2 员工C 0 部门B 电话2 ...

  2. scrapy 在爬取过程中抓取下载图片

    先说前提,我不推荐在sarapy爬取过程中使用scrapy自带的 ImagesPipeline 进行下载,是在是太耗时间了 最好是保存,在使用其他方法下载 我这个是在 https://blog.csd ...

  3. 手机app抓包工具,安卓手机adb无线连接

    默认手机已经usb调试配置完成 网络必须在同一网络中,每次断开wifi连接,都必须重新重做一次 使用数据线连接电脑 cmd 打开一个命令行 输入 # abd如果没有配置环境变量,请配置或者进入adb文 ...

  4. DOM解读

    DOM解读 DOM概念 - document object model:文档对象模型 操作文档的一套方法,document是一个对象,是dom的顶级对象,属于window的一个对象,并且可以说是最出色 ...

  5. vue依赖注入

    大家可能知道常规组件传值,父传子使用子组件定义好的props值,子传父可以使用子组件里面定义的时间this.$emit(); 然后很多层的情况,一层一层慢慢传太慢,vue提供了依赖注入的钩子:prov ...

  6. vue练手项目——桌面时钟

    用vue实现一个简单的网页桌面时钟,主要包括时钟显示.计时.暂停.重置等几个功能. 效果图如下,页面刚进来的时候是一个时钟,时钟上显示的时.分.秒为当前实际时间,点击计时器按钮后,页面变成一个计时器, ...

  7. Angular介绍

    Angulay介绍 1.介绍:是一个用于Html和TypeScript构建客户端应用平台与框架.Angular 本身就是用 TypeScript 写成的.基本构造块是 NgModule,它为组件提供了 ...

  8. H5新特性之语义化标签

    一.为什么要增加新的语义化标签 在HTML 5出来之前,我们用div来表示章节,但是这些div都没有实际意义,这样的布局方式使我们的结构不够清晰,于是语义化标签应运而生. 二.何为语义化标签 顾名思义 ...

  9. AspNetCore3.1_Secutiry源码解析_4_Authentication_JwtBear

    title: "AspNetCore3.1_Secutiry源码解析_4_Authentication_JwtBear" date: 2020-03-22T16:29:29+08: ...

  10. SpringBoot的启动流程是怎样的?SpringBoot源码(七)

    注:该源码分析对应SpringBoot版本为2.1.0.RELEASE 1 温故而知新 本篇接 SpringBoot内置的各种Starter是怎样构建的? SpringBoot源码(六) 温故而知新, ...