render函数的不同写法

render: h => {
  return h(CountTo, {
    props: {
      endVal: 5000
    },
    style: {
      color: 'pink',
      fontSize: '50px'
    },
    // 添加类的样式
    'class': {'count-to': true},
    on: {
      'on-animation-end': (val) => {
        console.log('end')
      }
    },
    // 因为不是原生的DOM元素，所以绑定事件的时候要用nativeOn来绑定
    nativeOn: {
      'click': () => {
        console.log('clicked!')
      }
    },
    domProps: {

    },
    // 在directives里面定义自定义指令
    directives: [],
    slot: '',
    // 在循环的时候会用到
    scopedSlots: {},
    key: '',
    // 通过ref可以获取标签的DOM，也可以获取组件的实例
    ref: ''
  })
  render: h => h('div', [
    h('ul', {}, getListArr(h))
  ])
  render: h => h('ul', getListArr(h))
  }

  
const handleClick = function (event) {
  console.log(event)
  console.log(event.target)
}

let list = [
  { name: 'denglun' },
  { name: 'denglun' }
  // {}
]
const getListArr = (h) => {
  return list.map(item => h('li', {
    on: {
      'click': handleClick
    },
    style: {
      fontSize: '30px',
      color: 'lightblue'
    }
  }, item.name))
}
//item.name 是 li 标签中的文本内容
//on 是给 li 标签注册事件
//style 是给 li 标签设置样式