vue2利用render，js中写html

1、js部门table.js

1. export default {
2.   name: "dadeT",
3.   data() {
4.     return {
5.       dades: 6666
6.     };
7.   },
8.   render(h) {
9.     return h('div', [
10.       h('span', `组件数据：${this.dades}`),  // 利用data里的dades数据，展示在页面上
11.       h('span', '89855545')
12.     ]);
13.   }
14. };

复制代码

2、vue部门

1. <template>
2.   <div>
3.     <dadeT></dadeT>
4.   </div>
5. </template>
7. <script>
8.   import dadeT from "./js/table.js"
9.   export default{
10.     data(){
11.       return {
12.         dades:6666
13.       }
14.     },
15.     components:{
16.       dadeT
17.     },
18.     mounted() {
20.     },
21.     methods:{
23.     }
24.   }
25. </script>
27. <style>
28. </style>

复制代码

3、js也可以如许写

1. export default {
2.   name: "dadeT",
3.   data() {
4.     return {
5.       dades: 6666
6.     };
7.   },
8.   render(h) {
9.     return (
10.       <div>8777777777</div>
11.     );
12.   }
13. };

复制代码

4、条件判定

1. export default {
2.   name: "dadeT",
3.   data() {
4.     return {
5.       dades: 6666
6.     };
7.   },
8.   render(h) {
9.     let text = ""
10.     if(this.dades == 6666){
11.       text = "是"
12.     }else{
13.       text = "不是"
14.     }
15.     return (
16.       <div>
17.         <div>{text}</div>
18.         <div>{text}</div>
19.       </div>
20.     );
21.   }
22. };

复制代码

大概

1. export default {
2.   props: ['showButton'],
3.   render(h) {
4.     if (this.showButton) {
5.       return h('button', '点击我');
6.     } else {
7.       return h('input', {
8.         attrs: {
9.           type: 'text'
10.         }
11.       });
12.     }
13.   }
14. };

复制代码

5、循环

1. export default {
2.   data() {
3.     return {
4.       items: [
5.         { id: 1, isVisible: true },
6.         { id: 2, isVisible: false },
7.         { id: 3, isVisible: true }
8.       ]
9.     };
10.   },
11.   render(h) {
12.     return h('div', this.items.map(item => {
13.       if (item.isVisible) {
14.         return h('p', `这是第${item.id}个元素`);
15.       } else {
16.         return null;
17.       }
18.     }));
19.   }
20. };

复制代码