uniapp实现以下功能？
上图
当我点击1间的时候只显示住客姓名1
当我点击2间的时候只显示住客姓名1 住客姓名2
当我点击3间的时候只显示住客姓名1 住客姓名2 住客姓名3
以此类推，该怎么实现呀 代码贴上了
<template> <view class="contents">
<view class="header">
<view class="title">
共和唐大酒店（新型分店）
</view>
<view class="detail">
<view class="time">
<view class="star">
<view class="t1">
2023-08-08
</view>
<view class="t2">
入住
</view>
</view>
<view class="star">
<view class="t1">
2023-08-08
</view>
<view class="t2">
入住
</view>
</view>
<view class="nums">
共1晚
</view>
</view>
<view class="mould">
<view class="name">
特价大床房
</view>
<view class="type">
<text>可住两人</text>|
<text>15平米</text>|
<text>不可退订</text>
</view>
</view>
</view>
</view>
<view class="staying">
<view class="title">
入住信息
</view>
<uni-collapse>
<uni-collapse-item :open="true" title="房间数量">
<view class="tags">
<u-tag class="tags-text" :text="item.text" v-for='(item,index) in dataType' :key='index'
:type="item.type" mode="item.mode" :show="item.show" plain @click="tagClick(item,index)" />
</view>
</uni-collapse-item>
</uni-collapse>
<view class="form">
<u--form labelWidth="auto" labelPosition="left" :model="model1">
<u-form-item label="住客姓名1" prop="userInfo.name" borderBottom>
<u--input v-model="model1.userInfo.name" placeholder="请输入住客姓名" border="none"></u--input>
</u-form-item>
<u-form-item label="住客姓名2" prop="userInfo.name" borderBottom>
<u--input v-model="model1.userInfo.name" placeholder="请输入住客姓名" border="none"></u--input>
</u-form-item>
<u-form-item label="住客姓名3" prop="userInfo.name" borderBottom>
<u--input v-model="model1.userInfo.name" placeholder="请输入住客姓名" border="none"></u--input>
</u-form-item>
<u-form-item label="住客姓名4" prop="userInfo.name" borderBottom>
<u--input v-model="model1.userInfo.name" placeholder="请输入住客姓名" border="none"></u--input>
</u-form-item>
<u-form-item label="住客姓名5" prop="userInfo.name" borderBottom>
<u--input v-model="model1.userInfo.name" placeholder="请输入住客姓名" border="none"></u--input>
</u-form-item>
<u-form-item label="联系人姓名" prop="userInfo.name" borderBottom>
<u--input v-model="model1.userInfo.name" placeholder="请输入联系人姓名" border="none"></u--input>
</u-form-item>
<u-form-item label="联系手机" prop="userInfo.name" borderBottom>
<u--input v-model="model1.userInfo.name" placeholder="请输入联系手机" border="none"></u--input>
</u-form-item>
<u-form-item label="最晚到店时间" prop="userInfo.name" borderBottom>
<u--input v-model="model1.userInfo.time" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
</u--form>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
dataType: [{
text: '1间',
type: 'info',
show: true,
mode: 'plain'
},
{
text: '2间',
type: 'info',
show: true,
mode: 'plain'
},
{
text: '3间',
type: 'info',
show: true,
mode: 'plain'
},
{
text: '4间',
type: 'info',
show: true,
mode: 'plain'
},
{
text: '5间',
type: 'info',
show: true,
mode: 'plain'
}
],
model1: {
userInfo: {
name: '',
sex: '',
time: '2023-08-08 16:00'
},
},
rules: {
'userInfo.name': {
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change']
},
'userInfo.sex': {
type: 'string',
max: 1,
required: true,
message: '请选择男或女',
trigger: ['blur', 'change']
},
},
index: 0
}
},
onLoad() {},
methods: {
open(e) {
// console.log('open', e)
},
close(e) {
// console.log('close', e)
},
change(e) {
// console.log('change', e)
},
//方法处理（单选）
tagClick(item, index) {
console.log(item, index)
this.dataType.forEach(res => {
res.type = 'info'
})
item.type = "primary"
this.index = index
}
}
}
</script>
<style lang="scss" scoped>
.contents {
background-color: #f3f4f8;
height: 100vh;
.header {
background: deepskyblue;
// border-radius: 30%;
border-bottom-left-radius: 30%;
border-bottom-right-radius: 30%;
height: 300rpx;
.title {
color: #fff;
text-align: center;
padding: 30rpx 0 40rpx 0;
}
.detail {
padding: 0 24rpx;
background: #fff;
border-radius: 20rpx;
margin: 0 24rpx;
.time {
display: flex;
justify-content: space-between;
align-content: center;
padding: 30rpx 0;
border-bottom: 1rpx solid #f6f6f6;
.star {
display: flex;
.t1 {}
.t2 {
color: #666;
padding-left: 16rpx;
}
}
}
.mould {
padding: 16rpx 0;
.type {
font-size: 26rpx;
color: #666;
padding: 20rpx 0;
text: nth-child(2) {
padding: 0 16rpx;
}
}
}
}
}
.staying {
margin-top: 80rpx;
background-color: #fff;
margin: 80rpx 24rpx 0 24rpx;
border-radius: 20rpx;
.title {
padding: 30rpx;
// border-bottom: 1rpx solid #f6f6f6;
}
.tags {
display: flex;
justify-content: space-around;
padding-bottom: 24rpx;
.tags-text {}
}
.form {
padding: 0 24rpx;
.u-form-item {
display: flex;
}
}
}
}
</style>
回答：
<template> <view class="form">
<u--form labelWidth="auto" labelPosition="left" :model="model1">
<u-form-item v-for="i in index + 1" :key="i" :label="'住客姓名' + i" prop="userInfo.name" borderBottom>
<u--input v-model="model1.userInfo.name[i - 1]" placeholder="请输入住客姓名" border="none"></u--input>
</u-form-item>
<!-- -->
</u--form>
</view>
</template>
<script>
export default {
data() {
return {
// ...
selectedRooms: 1 // 房间数量
}
},
methods: {
tagClick(item, index) {
console.log(item, index)
this.dataType.forEach(res => {
res.type = 'info'
})
item.type = "primary"
this.selectedRooms = index + 1 // 更新选择的房间数量
}
// ...
}
}
</script>
回答：
间数控制 list 的个数
然后住客姓名就是 list 的遍历
回答：
灵活一点的方式，写一个数组遍历，住客姓名1 住客姓名2这种，前面用索引+1这种方式拼接
以上是 uniapp实现以下功能？ 的全部内容， 来源链接： utcz.com/p/934773.html
