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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 497 天前的主题，其中的信息可能已经有所发展或是发生改变。

不会前端，最近用现成的框架改点东西，我想通过 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 条回复 • 2023-07-13 16:34:47 +08:00

chensuiyi

2023-07-13 15:09:15 +08:00

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

shakukansp

2023-07-13 15:11:46 +08:00

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

imherer

2023-07-13 15:12:37 +08:00

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

imherer

2023-07-13 15:13:36 +08:00

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

lianyue

2023-07-13 15:16:07 +08:00

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