Vue.js组件精讲--Render函数+表格组件

[PaulChess]

1. template和Render写法的对照:

   // template
   <template>
   <div id="main" class="container" style="color: red">
   <p v-if="show">内容 1</p>
   <p v-else>内容 2</p>
   </div>
   </template>
   <script>
   export default {
   data () {
     return {
       show: false
     }
   }
   }
   </script>

   // render
   export default {
   data () {
   return {
     show: false
   }
   },
   render: (h) => {
   let childNode;
   if (this.show) {
     childNode = h('p', '内容 1');
   } else {
     childNode = h('p', '内容 2');
   }
   
   return h('div', {
     attrs: {
       id: 'main'
     },
     class: {
       container: true
     },
     style: {
       color: 'red'
     }
   }, [childNode]);
   }
   }