<div class="liveInDetailList">
<div class="liveInDetail" v-for="(item,index) inPersonNamelist.guestList" :key="index">
<div class="infoDetail">
<span class="left">住客姓名</span>
<input type="text" placeholder="请输入姓名" class="searchRoomInp" autofocus="autofocus" v-model="item.name" ref="inputName" v-focus>
</div>
<div class="infoDetail">
<span class="left" >手机号</span>
<input type="text" placeholder="请输入手机号" class="searchRoomInp" v-model="item.mobilePhone" >
</div>
<div class="infoDetail">
<span class="left">身份z号</span>
<input type="text" placeholder="请输入身份z号" class="searchRoomInp" v-model="item.idCardNo">
</div>
<div class="handle" v-if="isShowDelete">
</div>
<div class="handle" v-else>
<i slot='rightIcon' class="iconfont icon-icon-shanchu deleterightIcon" @click.stop="delRoomCard(index)"></i>
</div>
</div>
</div>
2在data中定义
PersonNamelist:{
checkInRoomId:'',
guestList:[{id:"",name:"",mobilePhone:"",idCardNo:""}]
},
3.点击新增
1.定义一个obj
let obj={
id:"",
name:"",
mobilePhone:"",
idCardNo:""
}
2.点击一下将obj添加进数组PersonNamelist
4.该项目会从后台传来一个新增最多的人数所以需要判断下PersonNamelist中的guestList的长度
addPerson(){
let obj={
id:"",
name:"",
mobilePhone:"",
idCardNo:""
}
if(this.PersonNamelist.guestList.length<(后台数据))
this.PersonNamelist.guestList.push(obj)
}
else{
Toast({
message:'已超出该房间可住最大人数',
position:'bottom',
duration:1000,
className:'panduan'
})
}
}
1、打开html开发软件,新建一个html文件。
2、在html文件上创建一个知button按钮道,然后给这个按钮设置一个id,在案例中把按钮的id设置为show。
3、然后创建一个隐藏的div,把需要隐藏的内容写到这个div上,然后给这个div设置一个id。
4、给div设置隐藏的样式。在<title>标签后面为id为hide设置样式display:none,这个样id为hide的div就会被隐藏掉了。
5、为button按钮添加一个点击后隐藏事件内。点击button按钮后,把隐藏的div的display修改为block,这样点击后div就会显示了。
6、保存容好html后使用浏览器打开,点击button按钮就会发现隐藏的div就会显示出来了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)