我需求是根据返回数据创建相应标签,返回3条就创建3条标签
class="layui-nav-child" id="List">
$("#List").append("" +list[i].name+ " ");
to(){
layer.confirm(5);
}
这样添加click不生效我把这个标签直接写在dl里就可以触发这个弹窗,然后这样添加是能够正常显示name的就是点击的时候没有反应
该代码把列表中的每一项的名字添加到了#List元素中。为了根据返回数据创建相应标签,你可以循环遍历列表中的每一项,并将其名称添加为新的标签,代码如下:
for (var i = 0; i < list.length; i++) {
$("#List").append("<dd>" + list[i].name + "</dd>");
}
如果需要对每个标签执行操作,可以为每个标签添加唯一的ID,并通过该ID进行操作,代码如下:
for (var i = 0; i < list.length; i++) {
$("#List").append("<dd id='item" + i + "'>" + list[i].name + "</dd>");
$("#item" + i).click(function() {
layer.confirm(5);
});
}
在Vue.js中,可以使用指令v-for动态添加标签。该指令可以遍历数据并为每个数据项生成相应的标签。以下是一个例子:
<template>
<div id="List">
<dl class="layui-nav-child" v-for="item in list" :key="item.id">
<dd @click="to()">{{ item.name }}</dd>
</dl>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Tag 1' },
{ id: 2, name: 'Tag 2' },
{ id: 3, name: 'Tag 3' }
]
}
},
methods: {
to() {
layer.confirm('5');
}
}
}
</script>
可以在data函数中定义list数组,并在v-for指令中遍历该数组以生成标签。点击事件可以通过@click绑定到dd标签上,以触发to()方法。
注意:如果使用的是jQuery,则必须在挂载Vue实例后再使用jQuery。
此外,可能需要在引入Layui后在to()方法中调用layer.confirm()。