vue如何在render函数中循环(3)

h函数的三个参数

第一个参数是必须的。
类型:{String | Object | Function} 
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div  是表示创建一个div的元素

第二个参数是可选的。
类型:{Object} 主要是当前html中的各种属性。
如attrs,class,style等
在开发时。建议传,实在没有传的时候,传入 null


第三个参数可选的。
类型:{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。

如何在render函数中循环,实现以下代码

    <ul>
      <li>青椒炒肉丝 </li>
      <li>西红柿炒肉丝 </li>
      <li>蘑菇炒肉丝 </li>
    </ul>

在render中实现循环

export default{
    data(){
        return{
            isRed:true,
            arr:["青椒炒肉丝","西红柿炒肉丝","蘑菇炒肉丝"],
            inputValue:""
        }
    },
    //  h 最终创建的是一个元素
    // 第一个参数div  是表示创建一个div区域的元素
    // 第二个参数class表示的是这个div上有一个属性
    // 第三个参数可以是数组,表示div元素下的子元素
    render(h){
        return h('ul',
        // 第三个参数
        this.arr.map(item=>h("li",item))
       );
        
    }
}


posted @   南风晚来晚相识  阅读(1677)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示