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实现DIV的一些简单控制
Jun 04 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 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
Smarty中的注释和截断功能介绍
2015/04/09 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
JavaScript版代码高亮
2006/06/26 Javascript
一种JavaScript的设计模式
2006/11/22 Javascript
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
js 异步处理进度条
2010/04/01 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
js常用代码段收集
2011/10/28 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
劲霸男装广告词
2014/03/21 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书