zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

Vue循环 如何 函数 render
2023-09-27 14:22:20 时间

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))
       );
        
    }
}