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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
js中的reduce()函数讲解
Jan 18 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
微信小程序自定义底部弹出框功能
Nov 18 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
Python pandas如何向excel添加数据
2020/05/22 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
附答案的Java面试题
2012/11/19 面试题
校友会欢迎辞
2014/01/13 职场文书
运动会入场词200字
2014/02/15 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
千手观音观后感
2015/06/03 职场文书
教师师德工作总结2015
2015/07/22 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫