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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
vue计算属性及使用详解
Apr 02 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
JS数组方法some、every和find的使用详情
Oct 05 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
Javascript模板技术
2007/04/27 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
python 实现归并排序算法
2012/06/05 Python
Python实现批量下载文件
2015/05/17 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
初中三年学生的学习自我评价
2013/11/13 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
高一政治教学反思
2014/01/28 职场文书
重阳节登山活动方案
2014/02/03 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
小学班主任培训方案
2014/06/04 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers