请教前端大佬一个 Vue.js 问题

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1042 days ago, the information mentioned may be changed or developed.

不会前端，最近用现成的框架改点东西，我想通过 h 动态渲染一些 html 标签应该如何实现

 return h(
     <div>
         <h1 style="font-size:30px">1</h1>
         <h1 style="font-size:30px">2</h1>
         <h1 style="font-size:30px">3</h1>
     </div>
     )

例如上面的代码，div 里面的 h1 标签数量不确定，是通过一个数组来决定的，类似于这样

const arrList = [1, 2, 3]
    
<div v-for="item in arrList">
    <h1 style="font-size:30px">{item}</h1>
</div>

这个应该怎么写呢

10 replies • 2023-07-13 16:34:47 +08:00

chensuiyi

Jul 13, 2023

如果可以，能不能不用 h 函数实现呢。。

shakukansp

Jul 13, 2023

h('div', arrList.map( i => h('h1', { style:'font-size:30px' }, [i]) ))

imherer

Jul 13, 2023

@chensuiyi emmm ，谢谢你提醒，我好像知道怎么做了。我试试

imherer

Jul 13, 2023

@shakukansp 感谢大佬，这个是可行的

lianyue

Jul 13, 2023

```html
<template>
<AppBar></AppBar>
</template>
<script setup lang="ts">
const arrList = [1, 2, 3]

let children = []
for (let i = 0; i < arrList.length; i++) {
const item = arrList[i];
children.push(h('h1', { style: 'font-size:30px' }, String(item)))

}
const AppBar = h('div', {class:'h-div'}, children)
</script>
```