RE: JavaScript开发笔记

[lemooljiang]

<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 (
    `  
    <div border-dashed border-1 text-3.2 mb-2 id=${uniqueId}>
      <div flex ><div ml-auto px-1 hover:bg-red onclick="deleteUser('${userId}','${uniqueId}')">X</div></div> 
      <div>名字： ${username}</div>  
      <div>email： ${email}</div>
      <div>时间: ${TimesToLocal(created)}</div>
    </div>
    `
  )
}
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)
}