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 相关文章推荐
GRID拖拽行的实例代码
Jul 18 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
jQuery返回定位插件详解
May 15 jQuery
Vue.js实现分页查询功能
Nov 15 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
深入理解令牌认证机制(token)
Aug 22 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
python实现学生信息管理系统
2020/04/05 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
KTV的创业计划书范文
2014/02/02 职场文书
会计工作能力自我评价
2015/03/05 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
节约用水广告语60条
2019/11/14 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python