vue 点击按钮添加一行dom节点
2024-09-03 11:02:50
如图,最近项目需求,点击添加一行dom节点,包含下拉框和input输入框 ,下面展示一下代码
<ul class="sales-menuItem-ul">
<li class="sales-menuItem-li" v-for="(sub,index) in formdata.data" :key='index' >
<div>成本{{`${index+1}`}}</div>
<div class="pur-ret-lime">
<van-dropdown-menu class="vant-menu" active-color="#1989fa">
<van-dropdown-item v-model="sub.value1" :options="option1" />
</van-dropdown-menu>
<div class="pur-ret-icon"><img src="../../assets/images/icon_more_g.png" alt=""></div>
</div>
<div class="sales-flex flex-betweenCenter"><van-field v-model="sub.number1" type="number" />元/本</div>
</li>
</ul>
<div class="sales-menuItem-addBox"><span class="sales-menuItem-add gr_color" @click="addTags">+添加销售价格明细</span></div>
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);
},
}
好啦,大功告成!!
最新文章
- zookeeper原理及作用
- 使用EF Oracle实现DevExpress绑定大数据的ServerMode模式
- MVC的自定义动作过滤器(一)
- 某网SQL注入漏洞实战
- C++检测一个文件是否存在
- Selenium IDE测试创建
- AngularJS实现表单手动验证和表单自动验证
- Tomcat从零开始(十一)WebappLoader概述
- ArcGIS Pro 简明教程(4)工具和模型构建器
- HTML Input属性
- Java8-初识Lambda
- Python编码与变量
- vuejs项目---配置理解:
- Luogu 2680 NOIP 2015 运输计划(树链剖分,LCA,树状数组,树的重心,二分,差分)
- 洛谷4951 地震 bzoj1816扑克牌 洛谷3199最小圈 / 01分数规划
- css控制英文内容自动换行問題
- 【转载】WCF 客户端识别认证之UserName认证
- three的初步探索之表象篇
- 剑指Offer——左旋转字符串
- linux一键安装mysql脚本