uniapp新增input
文章描述：
uniapp点击按钮新增一个input文本框
template
<template>
<view class="page">
<view class="item" v-for="(item,index) in lists">
<view class="inputModel"><input type="text" placeholder="请输入"/></view>
<view class="delete" @tap="remove" :data-index="index">删除</view>
</view>
<button @tap="addInner">添加一个</button>
</view>
</template>script
var _self;
export default{
data(){
return{
index:1,
lists:[{id:1}],
}
},
onLoad() {
_self = this;
},
onShow() {
},
methods:{
addInner(e) {
_self.index += 1;
_self.lists.push({
id: _self.lists.index,
});
console.log(_self.lists);
},
remove:function(e){
// console.log(e);
var index = e.currentTarget.dataset.index;
_self.lists.splice(index,1);
},
}
}style
.page{
padding: 30upx 32upx;
}
.item{
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 20upx;
}
.inputModel{
padding: 20upx 0 20upx 10upx;
background: #eee;
border:1upx solid #C8C7CC;
border-radius: 5upx;
width: calc(100% - 120upx);
display: block;
}
.item view input{
font-size: 26upx;
color: #333;
}
.item .delete{
font-size: 26upx;
width: 80upx;
padding: 20upx 0 20upx 0;
}
发布时间：2021/11/18
发表评论