<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'
})
}
}
一、Vue css过渡的基本语法<div v-if="show" :transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS
/* 必需 */
.expand-transition {
transition: all .3s ease
height: 30px
padding: 10px
background-color: #eee
overflow: hidden
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0
padding: 0 10px
opacity: 0
}
vue从后台获取的数据有html标签通过v-html渲染到页面给html添加样式的方法如下：
准备材料：Vue.js、HBuilder、浏览器
1、创建静态页面vhtml.html，并引入vue.js文件。
2、在<body></body>元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令。
3、绑定v-html指令数据，这里设置为字符串。
4、Vue.js库的v-html指令是插入html元素，修改datas为包含<p></p>标签。
5、预览该静态页面，这时会看到页面显示如下
6、将调试打开，这时发现<div></div>中有个<p></p>标签，完成添加。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）