vue实现动态给id赋值,点击事件获取当前点击的元素的id操作


Posted in Javascript onNovember 09, 2020

:id绑定 :id="‘a_'+index"

输出的id为a_0,a_1。。。。。

<div v-for="(item,index) in list" :key="index" >
 <div :id="'a'+index" @click="b(index)">哈哈哈</div>
 </div>

然后在vue的实例中就可以拿到对应的id

b(index){
    this.list.splice(index,1);
}

<div @click="open($event)" id="1">添加<div>

open(a){
  console.log(a.currentTarget.id)//1
}

补充知识:Vue中怎么动态的去插入DOM节点呢?

问题描述:

排除数据的插入方式,假如存在两组数据,每两组为一个对象,那么如果要加载下一个对象时应该怎么去插入呢?

2017/09/14 昨天晚上在睡梦中,恍恍惚惚地想到了一个解决方法,其实也很简单,只不过之前一直没有细想。

解决方法:

1.之前通过artTemplate插件进行先渲染再插入的方式实现该需求。

2.而Vue则是数据更改之后再去渲染

3.那么既然这样那就把问题中的两组数据手动组装为一个数组,然后动态的插入,问题不就迎刃而解了吗

流程:假如存在A和B两个数组需要进行渲染

C = [
{
‘A': [],
‘B': []
}
]

组装为C数组,然后每次获取新的数据之后,动态地插入C数组,然后在DOM结构中循环渲染C数组,bingo!

以上这篇vue实现动态给id赋值,点击事件获取当前点击的元素的id操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 实现Json查询的方法实例
Apr 12 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
js实现页面图片消除效果
Mar 24 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 #jQuery
夯基础之手撕javascript继承详解
Nov 09 #Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 #Javascript
es5 类与es6中class的区别小结
Nov 09 #Javascript
vue实现标签云效果的示例
Nov 09 #Javascript
写一个Vue loading 插件
Nov 09 #Javascript
解决Vue大括号字符换行踩的坑
Nov 09 #Javascript
You might like
php中文字符截取防乱码
2008/03/28 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
php实现的CSS更新类实例
2014/09/22 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python常用库推荐
2016/12/04 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Python库安装速度过慢解决方案
2020/07/14 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
升职自荐信范文
2013/10/05 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
Python实现byte转integer
2021/06/03 Python
python_tkinter弹出对话框创建
2022/03/20 Python
python获取字符串中的email
2022/03/31 Python
SQL Server内存机制浅探
2022/04/06 SQL Server