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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
vue移动端的左右滑动事件详解
Jun 17 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创建多级目录代码
2008/06/05 PHP
php 面向对象的一个例子
2011/04/12 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
jquery简单体验
2007/01/10 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Django rest framework实现分页的示例
2018/05/24 Python
python实现雨滴下落到地面效果
2018/06/21 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
少先队学雷锋活动月总结
2014/03/09 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
文明市民先进事迹
2014/05/15 职场文书
在职员工证明书
2014/09/19 职场文书