vue如何在render函数中使用判断（2）

h函数的三个参数

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

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

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

在render函数中使用判断可以提高 页面的多样性

// 这是render函数的使用方法
export default{
    data(){
        return{
            isRed:true,
            arr:[1,2,3,4],
            inputValue:""
        }
    },
    //  h 最终创建的是一个元素
    // 第一个参数div  是表示创建一个div区域的元素
    // 第二个参数class表示的是这个div上有一个属性
    // 第三个参数可以是数组，表示div元素下的子元素
    render(h){
        // 在render函数中进行判断
        if (this.isRed==true){
            return h('div', {
                //第二个参数
                class: {
                    'is-red': this.isRed
                }
            },
            // 第三个参数
            [h('p', '这是一个render  true')]);
        }else{
            return h('div', {
                //第二个参数
                class: {
                    'is-red': this.isRed
                }
            },
            // 第三个参数
            [h('p', '我也是render函数isRed的值是false')]);
        }
    }
}