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 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 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
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php获取远程文件大小
2015/10/20 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
简单实现python画圆功能
2018/01/25 Python
如何基于python生成list的所有的子集
2019/11/11 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python中wx模块的具体使用方法
2020/05/15 Python
Python如何进行时间处理
2020/08/06 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书