vue2使用render,js中写html

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;
      }
    }));
  }
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/941009.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch | 利用PI-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用PI-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集PI-FGSM介绍背景和动机算法原理算法流程 PI-FGSM代码实现PI-FGSM算法实现攻击效果 代码汇总pifgsm.pytrain.pyadvtest.py 之前已经针对CIFAR10训练了多种分类器&#xff1a; Pytorch | 从零构建AlexN…

IMX6ULL开发板如何关掉自带的QT的GUI界面和poky的界面的方法

重要说明&#xff1a;其实最后发现根本没必要去关掉自带的QT的GUI界面&#xff0c;直接把屏幕先刷黑就可以看到测试效果了&#xff0c;把屏蔽先刷黑的代码见博文&#xff1a; https://blog.csdn.net/wenhao_ir/article/details/144594705 不过&#xff0c;既然花了时间摸索如何…

【网络安全】逆向工程 练习示例

1. 逆向工程简介 逆向工程 (RE) 是将某物分解以了解其功能的过程。在网络安全中&#xff0c;逆向工程用于分析应用程序&#xff08;二进制文件&#xff09;的运行方式。这可用于确定应用程序是否是恶意的或是否存在任何安全漏洞。 例如&#xff0c;网络安全分析师对攻击者分发…

Docker Compose 安装 Harbor

我使用的系统是rocky Linux 9 1. 准备环境 确保你的系统已经安装了以下工具&#xff1a; DockerDocker ComposeOpenSSL&#xff08;用于生成证书&#xff09;#如果不需要通过https连接的可以不设置 1.1 安装 Docker 如果尚未安装 Docker&#xff0c;可以参考以下命令安装&…

深入浅出:多功能 Copilot 智能助手如何借助 LLM 实现精准意图识别

阅读原文 1. Copilot中的意图识别 如果要搭建一个 Copilot 智能助手&#xff0c;比如支持 知识问答、数据分析、智能托管、AIGC 等众多场景或能力&#xff0c;那么最核心的就是基于LLM进行意图识别分发能力&#xff0c;意图识别的准确率直接决定了 Copilot 智能助手的能力上限…

ZED-OpenCV项目运行记录

项目地址&#xff1a;GitCode - 全球开发者的开源社区,开源代码托管平台 使用 ZED 立体相机与 OpenCV 进行图像处理和深度感知 • 使用 ZED 相机和 OpenCV 库捕获图像、深度图和点云。 • 提供保存并排图像、深度图和点云的功能。 • 允许在不同格式之间切换保存的深度图和点云…

Linux 常见用例汇总

注&#xff1a;本文为 Linux 常见用例文章合辑。 部分内容已过时&#xff0c;未更新整理。 检查 Linux 上的 glibc 版本 译者&#xff1a;joeren | 2014-11-27 21:33 问&#xff1a;检查 Linux 系统上的 GNU C 库&#xff08;glibc&#xff09;的版本&#xff1f; GNU C 库&…

PHP阶段一

PHP 一门编程语言 运行在服务器端 专门用户开发网站的 脚本后缀名.php 与HTML语言进行混编&#xff0c;脚本后缀依然是.php 解释型语言&#xff0c;不要编译直接运行 PHP运行需要环境&#xff1a; Windows phpstudy Linux 单独安装 Web 原理简述 1、打开浏览器 2、输入u…

REMOTE_LISTENER引发的血案

作者&#xff1a;Digital Observer&#xff08;施嘉伟&#xff09; Oracle ACE Pro: Database PostgreSQL ACE Partner 11年数据库行业经验&#xff0c;现主要从事数据库服务工作 拥有Oracle OCM、DB2 10.1 Fundamentals、MySQL 8.0 OCP、WebLogic 12c OCA、KCP、PCTP、PCSD、P…

Redis篇--常见问题篇6--缓存一致性1(Mysql和Redis缓存一致,更新数据库删除缓存策略)

1、概述 在使用Redis作为MySQL的缓存层时&#xff0c;缓存一致性问题是指Redis中的缓存数据与MySQL数据库中的实际数据不一致的情况。这可能会导致读取到过期或错误的数据&#xff0c;从而影响系统的正确性和用户体验。 为了减轻数据库的压力&#xff0c;通常读操作都是先读缓…

Phono3py hdf5文件数据读取与处理

Phono3py是一个主要用python写的声子-声子相互作用相关性质的模拟包&#xff0c;可以基于有限位移算法实现三阶力常数和晶格热导率的计算过程&#xff0c;同时输出包括声速&#xff0c;格林奈森常数&#xff0c;声子寿命和累积晶格热导率等参量。 相关介绍和安装请参考往期推荐…

机器学习(四)-回归模型评估指标

文章目录 1. 哪个模型更好&#xff1f;2. 线性回归评估指标3. python 实现线性模型评估指标 1. 哪个模型更好&#xff1f; 我们之前已经对房价预测的问题构建了线性模型&#xff0c;并对测试集进行了预测。 如图所示&#xff0c;横坐标是地区人口&#xff0c;纵坐标是房价&am…

Oracle 适配 OpenGauss 数据库差异语法汇总

背景 国产化进程中&#xff0c;需要将某项目的数据库从 Oracle 转为 OpenGauss &#xff0c;项目初期也是规划了适配不同数据库的&#xff0c;MyBatis 配置加载路径设计的是根据数据库类型加载指定文件夹的 xml 文件。 后面由于固定了数据库类型为 Oracle 后&#xff0c;只写…

Unity引擎学习总结------动画控件

左侧窗格可以在参数视图和图层视图之间切换。参数视图允许您创建、查看和编辑动画控制器参数。这些是您定义的变量&#xff0c;用作状态机的输入。要添加参数&#xff0c;请单击加号图标并从弹出菜单中选择参数类型。要删除参数&#xff0c;请在列表中选择该参数并按删除键&…

记录:virt-manager配置Ubuntu arm虚拟机

virt-manager&#xff08;Virtual Machine Manager&#xff09;是一个图形用户界面应用程序&#xff0c;通过libvirt管理虚拟机&#xff08;即作为libvirt的图形前端&#xff09; 因为要在Linux arm环境做测试&#xff0c;记录下virt-manager配置arm虚拟机的过程 先在VMWare中…

VSCode 搭建Python编程环境 2024新版图文安装教程(Python环境搭建+VSCode安装+运行测试+背景图设置)

名人说&#xff1a;一点浩然气&#xff0c;千里快哉风。—— 苏轼《水调歌头》 创作者&#xff1a;Code_流苏(CSDN) 目录 一、Python环境安装二、VScode下载及安装三、VSCode配置Python环境四、运行测试五、背景图设置 很高兴你打开了这篇博客&#xff0c;更多详细的安装教程&…

VBA编程:自定义函数 - 字符串转Hex数据

目录 一、自定义函数二、语法将字符串转换为hex数据MID函数:返回一个字符串中指定位置和长度的子串LEN函数:返回一个字符串的长度(字符数)Asc函数三、定义变量和数据类型变量声明的基本语法常见的数据类型四、For循环基本语法五、&运算符一、自定义函数 定义:用户定义…

jvm字节码中方法的结构

“-Xss”这一名称并没有一个特定的“为什么”来解释其命名&#xff0c;它更多是JVM&#xff08;Java虚拟机&#xff09;配置参数中的一个约定俗成的标识。在JVM中&#xff0c;有多个配置参数用于调整和优化Java应用程序的性能&#xff0c;这些参数通常以一个短横线“-”开头&am…

网络架构与IP技术:4K/IP演播室制作的关键支撑

随着科技的不断发展&#xff0c;广播电视行业也在不断迭代更新&#xff0c;其中4K/IP演播室技术的应用成了一个引人注目的焦点。4K超高清技术和IP网络技术的结合&#xff0c;不仅提升了节目制作的画质和效果&#xff0c;还为节目制作带来了更高的效率和灵活性。那么4K超高清技术…

Mac上Stable Diffusion的环境搭建(还算比较简单)

https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Installation-on-Apple-Silicon AI兴起的速度是真的快&#xff0c;感觉不了解点相关的东西都要与时代脱节了&#xff0c;吓得我赶紧找个AIGC看看能不能实现我艺术家的人梦想&#xff08;绷不住了&#xff09; 我…