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 相关文章推荐
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
js Dom实现换肤效果
Oct 21 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
js form action动态修改方法
2008/11/04 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
python显示天气预报
2014/03/02 Python
Python每天必学之bytes字节
2016/01/28 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
年会邀请函范文
2015/01/30 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫