vue点击新增添加div框

1.dom结构

<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的话尽量避免直接去 *** 作dom元素的，

1、建议直接通过数据取驱动生成模板

2、如果非要直接 *** 作dom建议在mounted生命周期中获取dom通过html或者append方法添加元素或者内容

1、新建html文档，然后在head标签中引入vue的js文件，这里以引入cdn文件为例：

2、在body标签中添加一个id为“app”的div标签，然后在这个div标签中再添加一个div标签，在vue中添加一个变量数据，然后用“{{}}”符号将变量引入到div标签中，并且在标签中添加“v-html="变量"v-html="变量"”属性：

3、用浏览器打开html文档，这时可以在页面中看到被v-html指令添加的html元素：

---