问题：
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代码: 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍Vue.js实现分页查询功能，包括了Vue.js实现分页查询功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue.js实现分页查询的具体代码，供大家参考，具体内容如下 vue.js的使用如下： 1、引入vue.js a、分页条 b、分页条js、css 2、分页的方法 3、封装page方法 4、定义获取总页数的方法 5、前台分页方法，获取后台的数据，实
-
求解 用的vue3
-
访问 xxx_m.jpg 或 xxx_m.jpeg ，如果返回 404 或 403 ，则重定向到 xxx.jpg 或 xxx.jpeg 可以理解为实现“访问压缩图 url ，如果 访问不到，则重定向原图 url” 问了 AI ，回答我是可以实现的，但是运维同学说实现不了，不确定 AI 是不是瞎扯的，有没有大佬解答下。 下面贴下 AI 给的配置：
-
本文向大家介绍Vue.js实现一个todo-list的上移下移删除功能，包括了Vue.js实现一个todo-list的上移下移删除功能的使用技巧和注意事项，需要的朋友参考一下 如图，A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo。首先要实现添加非空list，点击list切换finished状态这样的一个效果，推荐学习地址---->点击打
-
已经用uniapp写好了一个多链钱包app，现在需要在app中增加一个dapp浏览器功能，应该如何实现呢？ 我目前搜到的资料，按我大致的理解是，在vue页面里面添加一个<web-view>用来打开远程的web3网站，根据uniapp的官网说明，一个vue页面就是一个webview，那么这个vue页面中打开web3网站的webview组件就是一个子webview。剩下的问题就是 uniapp编写好的