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. SpringMVC听课笔记(十四:异常处理)

    1. SpringMVC通过HandlerExceptionResolver处理程序的异常,包括Handler映射,数据绑定以及目标方法执行时发生的异常 2.SpringMVC提供的HandlerEx ...

  2. Language Guide (proto3) | proto3 语言指南(四)枚举类型

    枚举类型 定义消息类型时,可能希望其中一个字段只包含预定义值列表中的一个.例如,假设您想为每个SearchRequest添加一个corpus(语料库)字段,其中语料库的值可以是UNIVERSAL.WE ...

  3. 七:Spring Security 前后端分离登录,非法请求直接返回 JSON

    Spring Security 前后端分离登录,非法请求直接返回 JSON 解决方案 在 Spring Security 中未获认证的请求默认会重定向到登录页,但是在前后端分离的登录中,这个默认行为则 ...

  4. Java——I/O相关练习代码

    File文件的相关练习 文件操作的三种方式 文件的相关方法练习 文件创建删除操作 文件练习 FileReader读取文件 读取文件逐行读取 InputStreamReader字符输出流 换行输出 Bu ...

  5. Dockerfile,Dockerfile 参考文档

    Dockerfile,Dockerfile 参考文档 1.Dockerfile 1.1Usage 1.2Format 1.3Parser directives 1.4escape 1.5Environ ...

  6. EasyUI动态显示后台数据库中的数据

    最近在完成一个项目,采用SSM框架搭建完成,前端使用EasyUI搭建页面: 其中涉及到一个查询显示功能:查询数据库中的数据,动态显示在页面之中,刚开始这部分十分有疑问,所以虚心向同学学习,现总结至博客 ...

  7. kafka auto.offset.reset参数解析

    kafka auto.offset.reset参数解析 1.latest和earliest区别 2.创建topic 3.生产数据和接收生产数据 4.测试代码 auto.offset.reset关乎ka ...

  8. socket套接字编程(1)——基本函数

    TCP交互流程: 服务器:1. 创建socket:2. 绑定socket和端口号:3. 监听端口号:4. 接收来自客户端的连接请求:5. 从socket中读取字符:6. 关闭socket. 客户端:1 ...

  9. Java中的transient关键字,使用小结

    transient关键字的介绍: 一个对象只要实现了Serilizable接口,这个对象就可以被序列化,Java的这种序列化模式为开发者提供了很多便利,可以不必关系具体序列化的过程,只要这个类实现了S ...

  10. 压缩文件 .zip.001 .zip.002合并

    可以把名字特别长的命名为1  这样简单些 copy /B 1.zip.001+1.zip.002 1.zip