Vu3中使用h函数

Vu3中使用h函数

    • h函数优缺点
    • h函数介绍
    • 使用

h函数优缺点

h函数介绍

  • 格式
    h函数接受三个参数 依次是创建的节点,节点属性,节点内容

  • 优点:
    跳过了模板编译,性能高

  • 缺点:
    学习成本略高

使用

<template><div><div>h函数</div><table border="1px" cellspacing="0px"><tr><td>序号</td><td>姓名</td><td>年龄</td><td>操作</td></tr><tr v-for="item in list"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td><btn type="edit">编辑</btn><btn type="delete">删除</btn></td></tr></table></div>
</template><script setup lang=ts>
import {reactive,h} from 'vue'let list = reactive([{id:1,name:"zs",age:18},{id:2,name:"ls",age:19},{id:3,name:"ww",age:20},
])//h函数优点 跳过了模板的编译
// parser -> ast -> transform -> js api -> generate -> render
//缺点 学习成本略高
//h函数格式  三个参数依次 创建的节点, 节点属性,节点内容(显示内容)
interface Props{type: 'edit' | 'delete'
}  
const btn = (props:Props,ctx:any)=>{return h('button',{style:{color: props.type === 'edit' ? 'green' : 'red',},onClick : () => {console.log("click");//发送事件ctx.emit('click',1232)}},ctx.slots.default())
}
</script><style scoped>
</style>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【 BUUCTFmisc--爱因斯坦】

这题比较简单&#xff0c;but 对于macOS 的一个 bug 是无法右键查看图片的详细备注&#xff0c;这题就是例子&#xff0c;导致隐藏的密码看不见 Windows 可以看到。具体解决办法是用 exiftool 工具 brew install exiftool exiftool -verbose image.jpg 找到 XPComment 栏&am…

搭建自己的私服 maven 仓库

申明&#xff1a;本文章所使用docker-compose配置文件纯属学习运用&#xff0c;非商用如有雷同请联系本人协调处理。 一、配置docker-compose.yml文件 # 指定docker-compose的版本 version: 3 services: nexus: container_name: nexus_container image: sonatype/nex…

智能指针——浅析

智能指针 本人不才&#xff0c;只能将智能指针介绍一下&#xff0c;无法结合线程进行深入探索 介绍及作用 在异常产生进行跳转时&#xff0c;通过栈帧回收进行内存释放&#xff0c;防止内存泄漏 基于RAII思想可以创建出只能指针 RAII(Resource Acquisition Is Initializatio…

Nicn的刷题日常之 有序序列判断

目录 1.题目描述 描述 输入描述&#xff1a; 输出描述&#xff1a; 示例1 示例2 示例3 2.解题 1.题目描述 描述 输入一个整数序列&#xff0c;判断是否是有序序列&#xff0c;有序&#xff0c;指序列中的整数从小到大排序或者从大到小排序(相同元素也视为有序)。 数据…

ROM/FLASH/RAM

ROM (Read Only Memory)程序存储器: 不能擦除&#xff0c;用于存储各种固化程序和数据&#xff0c;在单片机中用来存储程序数据及常量数据或变量数据&#xff0c;凡是c文件及h文件中所有代码、全局变量、局部变量、存储在ROM中 FLASH 存储器&#xff1a; Flash 存储器&#xf…

素数取りゲーム(线性筛、连续异或、博弈论

小结博弈论题型素数的特性连续异或 代码 题目&#xff1a;素数取りゲーム 临摹的题解&#xff1a;AT_ttpc2019d题解 这题真的看题解都断断续续看了两天才看懂这一个题解 : ( 小结 本题一下遇到了我好多没了解过的点&#xff0c;博弈论、素数的一些特性&#xff0c;连续异或的…

Python中的while循环,知其然知其所以然

文章目录 while循环结构1.用循环打印1 ~ 100步骤解析2. 1 ~ 100的累加和3.死循环1. 用死循环的方法实现 1 ~ 100累加和 4. 单向循环(1)打印 一行十个小星星*(2)通过打印一个变量的形式,展现一行十个小星星(3)一行十个换色的星星 ★☆★☆★☆★☆★☆(4)用一个循环,打印十行十列…

Zookeeper相关面试准备问题

Zookeeper介绍 Zookeeper从设计模式角度来理解&#xff0c;是一个基于观察者模式设计的分布式服务管理框架&#xff0c;它负责存储和管理大家都关心的数据&#xff0c;然后接受观察者的注册&#xff0c;一旦这些数据的状态发生了变化&#xff0c;Zookeeper就负责通知已经在Zoo…

DockerUI如何部署结合内网穿透实现公网环境管理本地docker容器

文章目录 前言1. 安装部署DockerUI2. 安装cpolar内网穿透3. 配置DockerUI公网访问地址4. 公网远程访问DockerUI5. 固定DockerUI公网地址 前言 DockerUI是一个docker容器镜像的可视化图形化管理工具。DockerUI可以用来轻松构建、管理和维护docker环境。它是完全开源且免费的。基…

windows10忘记密码的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

杨中科 ASP.NETCORE 高级14 SignalR

1、什么是websocket、SignalR 服务器向客户端发送数据 1、需求&#xff1a;Web聊天;站内沟通。 2、传统HTTP&#xff1a;只能客户端主动发送请求 3、传统方案&#xff1a;长轮询&#xff08;Long Polling&#xff09;。缺点是&#xff1f;&#xff08;1.客户端发送请求后&…

git 合并多条提交记录

我要合并多条提交记录&#xff08;合并前7条为一条&#xff09;&#xff0c;实现如下效果&#xff1a; 使用git rebase // 查看前10个commit git log -10 // 将7个commit压缩成一个commit&#xff1b;注意&#xff1a;vim编辑器 git rebase -i HEAD~4 // add已经跟踪的文件 g…

MemcachedRedis构建缓存服务器

目录 Memcached&Redis构建缓存服务器 一、介绍 二、memcached 1、特点 2、服务框架 3.配置安装memcached 三、redis服务 1、介绍 2、特点 3、缓存 4、安装redis 5、数据持久化 6、redis主从配置 Memcached&Redis构建缓存服务器 一、介绍 许多Web应用都将…

【Java基础_02】Java变量

【Java基础_02】Java变量、运算符、程序控制结构 文章目录 1 变量1.1 程序中“”号的使用1.2 数据类型1.3 整数类型1.3.1 整数类型的分类1.3.2 整型的使用细节 1.4 浮点类型1.4.1 浮点型的分类1.4.2 浮点类型使用细节 1.5 字符类型1.5.1 字符类型使用细节1.5.2 字符类型本质1.5…

2024.2.5日总结(小程序开发2)

小程序的宿主环境 宿主环境 宿主环境指的是程序运行所必须的依赖环境。 Android系统和iOS系统是两个不同的宿主环境。安卓版的微信App不能再iOS环境下运行。Android是安卓软件的宿主环境&#xff0c;脱离了宿主环境的软件是没有意义的。 小程序的宿主环境 手机微信是小程序…

黑豹程序员-ElementPlus支持树型组件带图标以及icon避坑

效果 vue代码 参数说明&#xff1a;node当前节点&#xff0c;data当前节点后台传入数据。 el-tree自身不支持图标&#xff0c;需要自己去利于实现&#xff0c;并有个坑&#xff0c;和elementui写法不同。 <el-col :span"12"><el-form-item label"绑定…

VC++添加菜单学习

新建一个单文档工程&#xff1b; 完成以后看一下有没有出现如下图的 资源视图 的tab&#xff1b;如果没有&#xff0c;在文件列表中找到xxx.rc2文件&#xff1b; 点击 资源视图 的tab&#xff0c;或者双击 .rc2 文件名&#xff0c;就会转到如下图的资源视图&#xff1b;然后展…

MySQL的触发器

一&#xff1a;概述 &#xff08;1&#xff09;介绍 &#xff08;2&#xff09;特性 二&#xff1a;基本操作 -- 用户表 create table user(uid int primary key,username varchar(50) not null,password varchar(50) not null );-- 用户信息操作日志表 create table user_…

如何有效降低商业电子邮件被盗的风险?

一、什么是商业电子邮件泄露&#xff1f; 你是否曾经经历过信任某人&#xff0c;但最终却被背叛的痛苦&#xff1f;在商业环境中&#xff0c;业务电子邮件泄露&#xff08;BEC&#xff09;就是一种通过电子邮件方式被你信任的人背叛的情况。然而&#xff0c;与人际关系中的背叛…

07.你还在手动部署代码吗

如今的项目或者个人项目中,大家的代码怎么部署呢?公司一般都有完整的持续集成以及持续交付平台,对于小公司可能也有各自搭建了一些,比如jenkins,以及gitlab集成的gitlab-ci等等,这些都可以完成我们部署的工作甚至是测试集成等等一系列流水化工作。 但是,即使如此,我依…