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

[imherer]

不会前端，最近用现成的框架改点东西，我想通过 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>
      

这个应该怎么写呢

[chensuiyi]

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

[shakukansp]

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

[imherer]

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

[imherer]

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

[lianyue]

```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>
```

[xinfushuo123]

如果可以用 jsx 的话 试试 v-for

[Laobai]

v-for 直接写在 h1 标签上就行了吧，对了记得加 key

[anonydmer]

虽然技术上没有问题，但是从语义上来说不应该包含多个 h1 吧

[waiaan]

vue 不是支持 jsx 语法吗？

[Yukiteru]

这个没必要用渲染函数，是基础中的基础，直接 v-for 循环渲染就好了。