热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue点击按钮添加一行dom节点

  如图,最近项目需求,点击添加一行dom节点,包含下拉框和input输入框,下面展示一下代码

 

 如图,最近项目需求,点击添加一行dom节点,包含下拉框和input输入框 ,下面展示一下代码

    class="sales-menuItem-ul">
  • class="sales-menuItem-li" v-for="(sub,index) in formdata.data" :key='index' >
    成本{{`${index+1}`}}

    class="pur-ret-lime">
    class="vant-menu" active-color="#1989fa">
    "sub.value1" :optiOns="option1" />

    class="pur-ret-icon">"../../assets/images/icon_more_g.png" alt="">


    class="sales-flex flex-betweenCenter">"sub.number1" type="number" />元/本



class="sales-menuItem-addBox">class="sales-menuItem-add gr_color" @click="addTags">+添加销售价格明细

return {
formdata:{
data:[
{
value1:
0,
number1:
0.5,
}
]
},
option1:[
{ text:
'材料成本', value: 0 },
{ text:
'材料成本2', value: 1 },
{ text:
'材料成本3', value: 2 },
],
}

methods:{
addTags(){
var that = this
const obj = {
value1:
0,
number1:
'',
};
that.formdata.data.push(obj);
},
}

 

好啦,大功告成!!

 



推荐阅读
  • 利用ViewComponents在Asp.Net Core中构建高效分页组件
    通过运用 ViewComponents 技术,在 Asp.Net Core 中实现了高效的分页组件开发。本文详细介绍了如何通过创建 `PaginationViewComponent` 类并利用 `HelloWorld.DataContext` 上下文,实现对分页参数的定义与管理,从而提升 Web 应用程序的性能和用户体验。 ... [详细]
  • 本文深入探讨了 `ExpressionChangedAfterItHasBeenCheckedError` 错误的原因及其解决方案。通过分析 Angular 的变更检测机制,详细解释了该错误的发生条件,并提供了多种有效的应对策略,帮助开发者在实际开发中避免这一常见问题。 ... [详细]
  • Prim算法在处理稠密图时表现出色,尤其适用于边数远多于顶点数的情形。传统实现的时间复杂度为 \(O(n^2)\),但通过引入优先队列进行优化,可以在点数为 \(m\)、边数为 \(n\) 的情况下显著降低时间复杂度,提高算法效率。这种优化方法不仅能够加速最小生成树的构建过程,还能在大规模数据集上保持良好的性能表现。 ... [详细]
  • PHP中元素的计量单位是什么? ... [详细]
  • 本文详细探讨了Java集合框架的使用方法及其性能特点。首先,通过关系图展示了集合接口之间的层次结构,如`Collection`接口作为对象集合的基础,其下分为`List`、`Set`和`Queue`等子接口。其中,`List`接口支持按插入顺序保存元素且允许重复,而`Set`接口则确保元素唯一性。此外,文章还深入分析了不同集合类在实际应用中的性能表现,为开发者选择合适的集合类型提供了参考依据。 ... [详细]
  • 本文作为“实现简易版Spring系列”的第五篇,继前文深入探讨了Spring框架的核心技术之一——控制反转(IoC)之后,将重点转向另一个关键技术——面向切面编程(AOP)。对于使用Spring框架进行开发的开发者来说,AOP是一个不可或缺的概念。了解AOP的背景及其基本原理,对于掌握这一技术至关重要。本文将通过具体示例,详细解析AOP的实现机制,帮助读者更好地理解和应用这一技术。 ... [详细]
  • React组件是构成用户界面的基本单元,每个组件都封装了特定的功能和逻辑,具备高度的独立性和可复用性。通过将不同大小和功能的组件组合在一起,可以构建出复杂且功能丰富的页面,类似于拼图游戏中的各个部分,最终形成一个完整的视觉效果。 ... [详细]
  • 如何将PHP文件上传至服务器及正确配置服务器地址 ... [详细]
  • [LeetCode 257] 二叉树路径详析与实现 ... [详细]
  • POJ 1696: 空间蚂蚁算法优化与分析
    针对 POJ 1696 的空间蚂蚁算法进行了深入的优化与分析。本研究通过改进算法的时间复杂度和空间复杂度,显著提升了算法的效率。实验结果表明,优化后的算法在处理大规模数据时表现优异,能够有效减少计算时间和内存消耗。此外,我们还对算法的收敛性和稳定性进行了详细探讨,为实际应用提供了可靠的理论支持。 ... [详细]
  • 利用Git插件在Android Studio中高效提交代码
    在Android Studio中,通过集成的Git插件,可以实现高效的代码提交流程。首先,确保项目已与远程Git仓库成功关联。接着,在项目目录上右键选择“Git”-“Commit Directory”,打开提交界面。在此界面中,详细填写提交信息,确保描述清晰准确,以便团队成员了解此次更改的具体内容。此外,还可以利用插件提供的功能进行代码审查和差异对比,进一步提升代码质量和协作效率。 ... [详细]
  • 在Laravel中实现PHP对JSON数据的发布与处理 ... [详细]
  • 浏览器中 W3School JavaScript 的 Location 对象详解
    Location对象是浏览器Window对象的一部分,通过`window.location`属性可访问。它包含了当前页面URL的相关信息,如协议、主机名、路径和查询参数等,对于页面导航和URL操作非常有用。 ... [详细]
  • BZOJ4240 Gym 102082G:贪心算法与树状数组的综合应用
    BZOJ4240 Gym 102082G 题目 "有趣的家庭菜园" 结合了贪心算法和树状数组的应用,旨在解决在有限时间和内存限制下高效处理复杂数据结构的问题。通过巧妙地运用贪心策略和树状数组,该题目能够在 10 秒的时间限制和 256MB 的内存限制内,有效处理大量输入数据,实现高性能的解决方案。提交次数为 756 次,成功解决次数为 349 次,体现了该题目的挑战性和实际应用价值。 ... [详细]
  • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
author-avatar
碎蜂CYM夜一
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有