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 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
js闭包用法实例详解
Dec 13 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 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数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
pygame实现五子棋游戏
2019/10/29 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
创建学习型党组织实施方案
2014/03/29 职场文书
团拜会策划方案
2014/06/07 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
单位委托书格式范本
2014/09/29 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
校友回访母校寄语
2015/02/26 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS