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 tab插件精简版分享
Sep 10 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
通过vue写一个瀑布流插件代码实例
Sep 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
example1.php
2006/10/09 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JS的数组迭代方法
2015/02/05 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python运行时间的几种方法
2016/06/17 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
浅谈python迭代器
2017/11/08 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python实现简单flappy bird
2018/12/24 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python将音频进行变速的操作方法
2020/04/08 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
保安拾金不昧表扬信
2014/01/15 职场文书
阳光体育活动总结
2014/04/30 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
教师个人培训总结
2015/02/11 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技