vue render 函数怎么条件判断，然后创建标签？

Question

比如下面的代码，我想进行 if(this.a == ture)判断才写上，否则就不写，怎么写？

还是说，只能这样判断

render:(h, params){
    if(this.a==true){
        return h('div', [
            h('Button', {
                props: {
                    type: 'primary',
                    size: 'small'
                },
                style: {
                    marginRight: '5px'
                },
                on: {
                    click: () => {
                        this.bookMn(params.index)
                    }
                }
            }, '管理'),
            h('Button', {
                props: {
                    type: 'success',
                    size: 'small'
                },
                style: {
                    marginRight: '5px'
                },
                on: {
                    click: () => {
                        this.nextpage(params.index)
                    }
                }
            }, '正文'),
            
            ...
        }else{
            h('Button', {
                props: {
                    type: 'primary',
                    size: 'small'
                },
                style: {
                    marginRight: '5px'
                },
                on: {
                    click: () => {
                        this.bookMn(params.index)
                    }
                }
            }, '管理'),
            
            ...
        }
    }
}

这样感觉要写好多重复的。。。

不知道还有没有别的思路，望大神赐教~~~

Answer 1

对<部分falsity>值,不会进行渲染 , 路过,乱说一波``

Answer 2

手写render函数非常不直观，建议配置jsx，使用jsx用三元操作符就可以实现

Answer 3

这样，你可以通过params.row的某个参数来决定你是否向数组中push，希望可以帮到你

render: (h, params) => {
  let btns = []
  params.row.a && btns.push(
    h('Button', {
      props: {
        type: 'primary',
        size: 'small'
      },
      style: {
        marginRight: '5px'
      },
      on: {
        click: () => {
          this.bookMn(params.index)
        }
      }
    }, '管理')
  )
  params.row.b && btns.push(
    h('Button', {
      props: {
        type: 'success',
        size: 'small'
      },
      style: {
        marginRight: '5px'
      },
      on: {
        click: () => {
          this.nextpage(params.index)
        }
      }
    }, '正文')
  )
  return h("div",btns)
}

Answer 4

你可以直接使用if判读，也可以直接在 h('ele',[]) 直接使用判断 ，有点类似 react的条件渲染。代码如下：