vue动态添加domv-for

vue动态添加domv-for,第1张

v-for是vue.js中的指令,用于遍历数组或对象中的数据,动态添加dom。使用v-for指令时,需要提供一个数组或对象,它会根据提供的数据来渲染相应的dom结构。v-for指令的语法是:v-for="(item,index) in items",其中items是要遍历的数组或对象,item是当前遍历到的元素,index是当前遍历到的元素的索引。使用v-for指令可以快速的渲染出dom结构,而不用写大量的dom结构代码。

1、动态增加img标签时将事件触发绑定在标签上(事先写好触发方法)

如:

//动态增加标签

$("body").append("<img src='' id='jsoaeig' onclick='imgclick(this)'/>")

//绑定的方法

function imgclick(obj){

//获取标签id

$(obj).attr("id")

}

2、动态增加标签之后遍历标签绑定事件

//增加标签

$("body").append("<img src='' id='jsoaeig' class='img'/>")

//遍历标签

$("body img").each(function(index,obj){

alert($(this).attr("id"))

})

js代码改成如下:

$("#listAdd").on("click",function(){

$("#list").append("<li>增加的</li>")

})

$("#list").on("click", "li", function(){

alert($(this).html())

})

使用jquery的on事件委托来处理动态添加元素动态添加事件。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11700128.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存