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 相关文章推荐
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
angularjs 的数据绑定实现原理
Jul 02 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
利用Python爬取可用的代理IP
2016/08/18 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
python cookie反爬处理的实现
2020/11/01 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
.NET方向面试题
2014/11/20 面试题
网络事业创业计划书范文
2014/01/09 职场文书
美容院店长岗位职责
2014/04/08 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
标准单位租车协议书
2014/09/23 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis