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,所以 ...
随机推荐
- 基于springcloud框架搭建项目-Eureka篇(一)
springcloud项目近年来算是很流行的了,不少公司项目目前都用到了,毕竟优点很多,刚好公司项目用到了,根据自己的理解,简单搭建一下,以便以后学习 这里简单的介绍一下它: SpringCloud, ...
- 数据结构之HashMap
前言 在我们开发中,HashMap是我们非常常用的数据结构,接下来我将进一步去了解HashMap的原理.结构. 1.HashMap的实现原理 HashMap底层是基于Hash表(也称“散列”)的数据结 ...
- 黑科技神器-uTools
Hello,各位小伙伴们好,又到周末了,小黑哥给大家分享一款神器:『utools』. 官网地址:https://u.tools/ uTools 是一个极简.插件化.跨平台的现代桌面软件.通过自由选配丰 ...
- Spring源码阅读笔记05:自定义xml标签解析
在上篇文章中,提到了在Spring中存在默认标签与自定义标签两种,并且详细分析了默认标签的解析,本文就来分析自定义标签的解析,像Spring中的AOP就是通过自定义标签来进行配置的,这里也是为后面学习 ...
- OpenCV3入门(十三)图像运动模糊
1.原理 运动模糊产生: 由于相机传感器或物体相对运动, 按快门瞬间造成图像产生运动模糊. 在用摄像机获取景物图像时,如果在相机曝光期间景物和摄像机之间存在相对运动,例如用照相机拍摄快速运动的物体,或 ...
- jupyter 安装问题 building 'zmq.libzmq' extension error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools
1.用pip install jupyter 安装到一半就报错 错误提示: building 'zmq.libzmq' extension error: Microsoft Visual C++ 14 ...
- 谈谈一些逻辑相同,性能差异却很大的sql
总结写在前面: 1. 本篇讲述了三个例子,其本质都是揭示了若对索引字段做函数操作,可能会破坏索引值的有序性,由此优化器就决定放弃走树搜索功能. 2. 由第1点提供了一个优化思路,即我们能否避免或转化s ...
- 解决QQ“抱歉,无法发起临时会话,您可以 添加对方为好友以发送消息”
很多网站,目前无法发起临时会话,自己在找网上找到教程,特分享给大家.自从2014年3月1日开始,网站上放置QQ客服代码的网站,在点击联系QQ时,以前可以正常发起临时会话的,现在提示:“抱歉,无法发起临 ...
- Session的常用方法
Session的常用方法 session对象主要用于属性操作和会话管理,常用方法如下: 1.public void setAttribute(String name,String value)设定指定 ...
- java-接口(新手)
//创建的一个包名. package jiekou; //接口方法. //创建一个接口并且起名字. public interface JK { //抽象的返回值.(具体功能未定义,需要自己定义) ab ...