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控制TR显示隐藏的三种常用方法
Aug 21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
原生js简单实现放大镜特效
May 16 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 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制作静态网站的模板框架
2006/10/09 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Python备份Mysql脚本
2008/08/11 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Django框架反向解析操作详解
2019/11/28 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
高二生物教学反思
2014/01/27 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
公司踏青活动方案
2014/08/16 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
五心教育心得体会
2014/09/04 职场文书
论文答谢词
2015/01/20 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
详解Django的MVT设计模式
2021/04/29 Python
Python函数中apply、map、applymap的区别
2021/11/27 Python
MySQL的索引你了解吗
2022/03/13 MySQL
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
MySQL数据库简介与基本操作
2022/05/30 MySQL