当前位置：首页 > news >正文

vue2使用render，js中写html

news 2025/7/8 22:13:58

1、js部分table.js

export default {name: "dadeT",data() {return {dades: 6666};},render(h) {return h('div', [h('span', `组件数据：${this.dades}`),  // 利用data里的dades数据，展示在页面上h('span', '89855545')]);}
};

2、vue部分

<template><div><dadeT></dadeT></div>
</template><script>import dadeT from "./js/table.js"export default{data(){return {dades:6666}},components:{dadeT},mounted() {},methods:{}}
</script><style>
</style>

3、js也可以这样写

export default {name: "dadeT",data() {return {dades: 6666};},render(h) {return (<div>8777777777</div>);}
};

4、条件判断

export default {name: "dadeT",data() {return {dades: 6666};},render(h) {let text = ""if(this.dades == 6666){text = "是"}else{text = "不是"}return (<div><div>{text}</div><div>{text}</div></div>);}
};

或者

export default {props: ['showButton'],render(h) {if (this.showButton) {return h('button', '点击我');} else {return h('input', {attrs: {type: 'text'}});}}
};

5、循环

export default {data() {return {items: [{ id: 1, isVisible: true },{ id: 2, isVisible: false },{ id: 3, isVisible: true }]};},render(h) {return h('div', this.items.map(item => {if (item.isVisible) {return h('p', `这是第${item.id}个元素`);} else {return null;}}));}
};