vue render JSX写法

vue render JSX写法

一、为什么要用JSX写法
JSX写法相比render写法，更接近html语法；
遇到变量， 用{}，{}里面写变量，

<script type="text/jsx">
export default {
    data() {
        return {

        }
    },
    watch: {

    },
    components: {},
    render(h) {
        let tr = this.createHead(h);
        return (<table class="editTable__block" id="tb"><thead>{tr}</thead></table>)
    },
    props: {
        allRow: {
            type: Boolean,
            defaule: false
        }
    },
    methods: {
      sync (prop, value) {
        this[prop] = value
      },
      createHead() {
        let tr = [];
        let rowspan = 10;
        let width= 80;
        let height = 40;
        for(let i = 0; i < rowspan; i++) {
                if(i === 0) {
                    let cell = (<th style={{width: width + 'px', height: height + 'px'}} onclick={this.thClick()}> 11111 </th>)
                    tr.push(<tr>{cell}</tr>)
                } else {
                    tr.push(<tr></tr>)
                }
        }
        return tr;
      },
      thClick() {
          console.log('thClick!!!!')
      }


    }
}
</script>

欢迎关注我的个人技术公众号