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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
javascript判断office版本示例
Apr 11 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
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/06 日漫
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
新版小程序登录授权的方法
2018/12/12 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python 写一个文件分发小程序
2020/12/05 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
办公室文秘自我评价
2013/09/21 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
第二课堂活动总结
2014/05/07 职场文书
校园之声广播稿
2015/08/18 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书