vue2使用render,js中写html

1、js部分table.js

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

2、vue部分

bash 复制代码
<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也可以这样写

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

4、条件判断

bash 复制代码
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>
    );
  }
};

或者

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

5、循环

bash 复制代码
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;
      }
    }));
  }
};
相关推荐
IT_陈寒10 小时前
Redis 性能翻倍的 5 个隐藏技巧,99% 的开发者都不知道第3点!
前端·人工智能·后端
街尾杂货店&10 小时前
css word属性
前端·css
fruge12 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician13 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手16 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng17 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科17 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君201617 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao200919 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔20 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js