html部分
<div class="star">
<span v-for="(item,index) in 5" @click="clickStar($event)"></span>
</div>
说明:遍历span 5次,得到5组span,$event为目标事件

js部分
clickStar($event){
$event.currentTarget.className='active';//console.log($event.currentTarget);
}

说明:当点击目标事件的时候,目标事件下的目标元素,增加class,这样就实现了动态添加class。
(currentTarget:
目标元素)

转载请标明出处!http://www.cnblogs.com/holy-amy/p/7091329.html

vue动态添加当前事件下的class的更多相关文章

  1. jq动态添加onclick事件在谷歌中不起作用

    $("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...

  2. vue动态添加路由addRoutes之不能将动态路由存入缓存

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...

  3. ObjectARX动态添加AutoCAD传统下拉菜单入门篇(一)

    ObjectARX动态添加传统下拉菜单入门篇 图文by edata  , 转载注明出处 http://www.cnblogs.com/edata AutoCAD 添加传统下拉菜单有很多种方式,比较典型 ...

  4. vue 动态添加对象属性

    昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)

  5. vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式

    created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css&qu ...

  6. vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

    之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...

  7. vue 动态添加路由 require.context()

    之前的写法 'use strict' import Vue from 'vue' import MessageBroadcast from 'page/MessageBroadcast' import ...

  8. vue动态添加对象属性,视图不渲染

    发现数据确实改变了.但是视图没有渲染.原因是赋值的问题,应该这样动态增加属性 vm.$set(vm.template.titleAttachInfoDetail,newKey,newVal) vm 当 ...

  9. Vue动态添加响应式属性

    不能给Vue实例.Vue实例的根数据对象添加属性. 文件 <template> <div id="app"> <h2>{{hello}}:{{a ...

随机推荐

  1. 洛谷P2145

    Description 给定一串数字,每个数字代表一种颜色 你可以向这个数字序列里加任意数字,每加一个视为一次操作 当你加入的数字和与它相连的同种数字不少于三个时,他们就会消除 消除后序列的两端自动靠 ...

  2. kubernetes 身份与权限认证 (ServiceAccount && RBAC)

    Kubernetes中提供了良好的多租户认证管理机制,如RBAC.ServiceAccount还有各种Policy等.   ServiceAccount Service Account为Pod中的进程 ...

  3. (4)Linux常用的运维平台和工具

    运维工程师使用的运维平台和工具包括: Web服务器:apache.tomcat.nginx.lighttpd 监控:nagios.ganglia.cacti.zabbix 自动部署:ansible.s ...

  4. linux 一分钟安装maven linux

    mkdir maven cd maven/ wget https://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.6.3/binaries/ ...

  5. Java排序算法(二)选择排序

    一.测试类SortTest import java.util.Arrays; public class SortTest { private static final int L = 20; publ ...

  6. PIE模型

    首先,我们需要明确程序的Bug有如下的定义: 1. Fault/Defect 静态的,存在于软件中的缺陷.例如:一段有缺失或者错误的代码. 2. Error 运行时一种不正确的中间状态. 3. Fai ...

  7. CF-1445 C - Division 数论,质因数,唯一分解定理

    题意 给定一个 \(p (p\le 10^{18})\), 一个 \(q(q \le 10^9)\), 要找到一个最大的 \(x\) 满足: \(p \%x = 0\) \(q \% x \neq 0 ...

  8. N皇后解法以及位运算优化

    N皇后解法以及位运算优化 观察棋盘,要求皇后之间不能处在同行同列同一条斜线,求使得每行都有一个皇后的放置方法共有多少种. 每尝试放置一个皇后,都可以把该位置所在的行.列标号用一个数组标记,含义表示该行 ...

  9. ACM-ICPC 2018 南京赛区网络预赛(12/12)

    ACM-ICPC 2018 南京赛区网络预赛 A. An Olympian Math Problem 计算\(\sum_{i=1}^{n-1}i\cdot i!(MOD\ n)\) \(\sum_{i ...

  10. The 10th Shandong Provincial Collegiate Programming Contest(11/13)

    $$The\ 10th\ Shandong\ Provincial\ Collegiate\ Programming\ Contest$$ \(A.Calandar\) 签到 //#pragma co ...