<div v-for="(item,index) in history" :key="index" 
  :id=item._id border-dashed border-1 text-3.2 mb-2
  >
    <div flex ><div ml-auto px-1 hover:bg-red @click="delX(item._id)">X</div></div>
    <div>名字： {{item.username}}</div>  
    <div>email: {{item.email}}</div>
</div>
<div text-center><n-button @click="more" v-if="moreFlag" strong secondary>更多</n-button></div>
//js
//把取得的值遍历，塞入temp, 再赋给history。history是响应式的，div就会实时渲染出来！
let history = ref(null)
let temp = []
for (let i in data.value.payhistory) {
    temp.push(data.value.payhistory[i])
  }
history.value = temp

//另一种方法
//直接使用document来操作DOM
<div id="item_container"></div> 
//js
const itemStripe = (userId, username, email,created, uniqueId) => {
  return (
    `  
    

      
X
 
      
名字： ${username}
  
      
email： ${email}
      
时间: ${TimesToLocal(created)}
    
    `
  )
}
let itemContainer = document.querySelector('#item_container')
for (let i in data.value.payhistory) {
  console.log(56, data.value.payhistory[i])
  let userId = data.value.payhistory[i]._id
  let username = data.value.payhistory[i].username
  let email = data.value.payhistory[i].email
  let created = data.value.payhistory[i].created
  let uniqueId = generateUniqueId()
  itemContainer.innerHTML += itemStripe(userId, username, email, created, uniqueId)
}