问题：
vue.js - 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>共有1个答案
慕容安易
间数控制 list 的个数
然后住客姓名就是 list 的遍历
类似资料：
-
本文向大家介绍Vue.js实现备忘录功能，包括了Vue.js实现备忘录功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue.js实现备忘录的具体代码，供大家参考，具体内容如下 效果展示: html代码: CSS代码: js代码: 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
访问 xxx_m.jpg 或 xxx_m.jpeg ，如果返回 404 或 403 ，则重定向到 xxx.jpg 或 xxx.jpeg 可以理解为实现“访问压缩图 url ，如果 访问不到，则重定向原图 url” 问了 AI ，回答我是可以实现的，但是运维同学说实现不了，不确定 AI 是不是瞎扯的，有没有大佬解答下。 下面贴下 AI 给的配置：
-
uniapp项目app端实现下载海报 现在的代码如下： html js 原先是下载二维码，现在换成下载海报，海报里显示@/static/img/codeImg.jpg，school_name、classes_name跟一个背景色background: #f3af1e，还有二维码codeImg，下载的海报图样式跟下面的图片一样，关闭跟下载按钮不要，其他都要 大佬们，修改上面的代码如何实现下载海报功能
-
本文向大家介绍Vue.js实现分页查询功能，包括了Vue.js实现分页查询功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue.js实现分页查询的具体代码，供大家参考，具体内容如下 vue.js的使用如下： 1、引入vue.js a、分页条 b、分页条js、css 2、分页的方法 3、封装page方法 4、定义获取总页数的方法 5、前台分页方法，获取后台的数据，实
-
求解 用的vue3
-
如图,在uni中怎么实现这种轮播,不是纯图片,里面的数字需要动态获取 目前在寻找插件,