vue动态添加当前事件下的class

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
时间: 2024-08-07 08:57:09

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

动态添加html事件无响应

问题描述:在页面中动态使用js添加的html中设置了onclick事件,生产页面后点击事件无效并提示:Cannot read property 'xxx' of undefined 如: $('.test').append("<li><a href='javascript:void(0);' onclick=\"search.fn.HotSearch('" + v + "')\">" + v + "</a&

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

在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

Vue动态添加v-model绑定及获取其返回数据

从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上,并且根据对页的操作获取到返回的值: 1.首先在data里定义一个数据 timeTip 为一个空数组 data () { return { timeTip:[] } } 2.将获取到的数据进行动态生成,并塞入 timeTip 中 creadeTimeTip(data.data) //返回的数据 creadeTimeTip(data){ this.timeTip = []; //对空数组进行清空,以免影响后续操作 var len

JQuery 动态添加onclick事件

$('#div_id').click(function(){ show(1,2,this); });

vue 动态添加样式的方式

一. <li v-for="(chatting,index) in item" :key="index" :class="{'user_right':chatting.user_id}"> 判断chatting中是否有user_id,如果有就追加user_right类名 二. <p :class="coms===1?'hear1':'hear'"></p> 判断coms是否等于1,如果等于就

动态加载下拉框列表并添加onclick事件

1.  js动态加载元素并设置属性 摘自(http://www.liangshunet.com/ca/201408/336848696.htm) <div id="parent"></div> function addElementDiv(obj) { var parent = document.getElementById(obj); //添加 div var div = document.createElement("div"); //设

动态给表格TD 添加单击事件

需求:项目中对原有的JQ框架表格功能要进行完善 实现 单元格单击编辑 思路:JS中遍历生成好的表格 动态给TD 添加单击事件. 问题:遍历添加时,给TD 加样式 加属性都可以 但是如果要加单击事件 死活加不上去. 1 //文本控件模版 2 var textTemp = "<input type=\"text\" value={0} />"; 3 var RawData; //原始数据 4 //js控制列 可修改 5 $("tr", $

jQuery-为动态添加的元素绑定事件

样例: $("#modify_nick").click(function () { $(this).css("display","none"); $("#nickname_span").empty(); var input = document.createElement("input"); $(input).attr("type", "text"); $(input

android studio 菜鸟实战项目 之 点击事件以及动态添加

原始界面:               登陆失败:             登陆成功:              动态添加控件: 布局如下:(特别声明最后又一个空linearlayout,这是为了后面的动态添加事件) <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu