<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. IntelliJ IDEA神器使用技巧

    说明:详情请参考慕课网课程:IntelliJ IDEA神器使用技巧:http://www.imooc.com/learn/924(感谢课程作者:闪电侠) 推荐: 1. 课程老师(闪电侠)IDEA快捷键 ...

  2. Nginx 推流 拉流 --- 点播直播

    1. 准备环境 安装操作系统Cenos 配置yum源 yum:https://developer.aliyun.com/mirror/ Nginx依赖 gcc-c++ zlib pcre openss ...

  3. MySQL 【教程一】

    前言 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. 每个数据库都有一个或多个不同的 API 用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据存 ...

  4. http2 技术整理 nginx 搭建 http2 wireshark 抓包分析 server push 服务端推送

    使用 nginx 搭建一个 http2 的站点,准备所需: 1,域名 .com .net 均可(国内域名需要 icp 备案) 2,云主机一个,可以自由的安装配置软件的服务器 3,https 证书 ht ...

  5. golang Printf 函数有超过 10 个转义字符

    verb 描述 %d 十进制整数 %x, %o, %b 十六进制.八进制.二进制整数 %f, %g, %e 浮点数:如 3.141593, 3.141592653589793, 3.141593e+0 ...

  6. html5 拖放购物车

    1.本例中模仿了购物车添加的功能 主要运用了ondragstart / ondragover/ ondrag 功能 功能比较简单 遗留问题:火狐下图片拖进会被打开 <!doctype html& ...

  7. 两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走 (不加flex不自动撑开)

    两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走

  8. ECNU 计算机系统 (CSAPP) 教材习题作业答案集

    这里是华东师范大学计算机系统的作业答案.由于几乎每一年布置的习题都几乎相同,网上的答案又比较分散,就把自己上学期提交的作业pdf放上来了,供参考. 长这样 Download Link:http://c ...

  9. CSS每日学习笔记(1)

    7.30.2019 1.CSS 文本属性 属性 描述 color 设置文本颜色 direction 设置文本方向. line-height 设置行高. letter-spacing 设置字符间距. t ...

  10. Drawing Simple Polygon(Create Simple Polygon from unordered points by angle sorting)

    Keywords: 极角排序, Simple Polygon Generation Given set of points in the plane, your task is to draw a p ...