vue3 中直接使用 JSX ( lang=“tsx“ 的用法)

1. 安装依赖

npm i @vitejs/plugin-vue-jsx

2. 添加配置

vite.config.ts 中

import vueJsx from '@vitejs/plugin-vue-jsx'

plugins 中添加

vueJsx()

3. 页面使用

<!-- 注意  lang  的值为  tsx -->
<script setup lang="tsx">
const isDark = ref(false)// 此处使用了 JSX
const Sunny = () => <div class="i-bx:sun w-1em h-1em"></div>
const Moon = () => <div class="i-bx:moon w-1em h-1em"></div>
</script><template><el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny"> </el-switch>
</template>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp如何i18n国际化

1、正常情况下项目在代码生成的时候就已经有i18n的相关依赖&#xff0c;如果没有可以自行使用如下命令下载&#xff1a; npm install vue-i18n --save 2、创建相关文件 en文件下&#xff1a; zh文件下&#xff1a; index文件下&#xff1a; 3、在main.js中注册&#xff1a…

【视觉SLAM】4b-特征点法估计相机运动之PnP 3D-2D

文章目录 1 问题引入2 求解P3P 1 问题引入 透视n点&#xff08;Perspective-n-Point&#xff0c;PnP&#xff09;问题是计算机视觉领域的经典问题&#xff0c;用于求解3D-2D的点运动。换句话说&#xff0c;当知道n个3D空间点坐标以及它们在图像上的投影点坐标时&#xff0c;可…

wsl2配置文件.wslconfig不生效

问题 今天在使用wsl时&#xff0c;通过以下配置关闭swap内存&#xff0c;但是发现重启虚拟机之后也不会生效。 [wsl2] swap0 memory16GB后来在微软官方文档里看到&#xff0c;只有wsl2才支持通过.wslconfig文件配置&#xff0c;于是通过wsl -l -v查看当前wsl版本&#xff0c;…

借助Excel实现Word表格快速排序

实例需求&#xff1a;Word中的表格如下图所示&#xff0c;为了强化记忆&#xff0c;希望能够将表格内容随机排序&#xff0c;表格第一列仍然按照顺序编号&#xff0c;即编号不跟随表格行内容调整。 乱序之后的效果如下图所示&#xff08;每次运行代码的结果都不一定相同&#x…

系统架构设计师:系统架构设计基础知识

从第一个程序被划分成模块开始&#xff0c;软件系统就有了架构。 现在&#xff0c;有效的软件架构及其明确的描述和设计&#xff0c;已经成为软件工程领域中重要的主题。 由于不同人对Software Architecture (简称SA) 的翻译不尽相同&#xff0c;企业界喜欢叫”软件架构“&am…

T6识别好莱坞明星

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 导入基础的包 from tensorflow import keras from tensorflow.keras import layers,models import os, PIL, pathlib import matplotlib.pyplot as pl…

MybatisPlus的基础使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1、基础crud增加insert()方法&#xff1a; 删除修改查询 2、分页查询配置分页拦截器使用分页查询功能开启MP日志在yml配置文件中配置日志查看日志 3、条件查询条…

基于stm32的智能变频电冰箱系统

基于stm32的智能变频电冰箱系统 持续更新&#xff0c;欢迎关注!!! 基于stm32的智能变频电冰箱系统 随着集成电路技术的发展&#xff0c;单片微型计算机的功能也不断增强&#xff0c;许多高性能的新型机种不断涌现出来。单片机以其功能强、体积小、可靠性高、造价低和开发周期短…

【提高篇】3.3 GPIO(三,工作模式详解 上)

目录 一,工作模式介绍 二,输入浮空 三,输入上拉 一,工作模式介绍 GPIO有八种工作模式,参考下面列表,我们先有一个简单的认识。 二,输入浮空 在输入浮空模式下,上拉/下拉电阻为断开状态,施密特触发器打开,输出被禁止。输入浮空模式下,IO口的电平完全是由外部电路…

代码训练营 day66|Floyd 算法、A * 算法、最短路算法总结

前言 这里记录一下陈菜菜的刷题记录&#xff0c;主要应对25秋招、春招 个人背景 211CS本CUHK计算机相关硕&#xff0c;一年车企软件开发经验 代码能力&#xff1a;有待提高 常用语言&#xff1a;C 系列文章目录 第66天 &#xff1a;第十一章&#xff1a;图论part11 文章目录…

Vue中template模板报错

直接<v出现如下模板&#xff0c;出现如下错误 注意两个地方&#xff1a; 1.template里面加一个div标签 2.要写name值 如下图

五、函数封装及调用、参数及返回值、作用域、匿名函数、立即执行函数

1. 函数基本使用 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style&…

前端flutter

在一个风和日丽的午后&#xff0c;本以为又是一个普通的摸鱼日子&#xff0c;却突然被领导拉去谈话&#xff0c;意思就是公司后面要基于现有小程序和H5项目&#xff0c;转化到APP上去&#xff1b;无奈的是目前部门的研发小组并没有能够开发APP的人&#xff0c;既然这事找到我了…

在uniapp中使用canvas封装组件遇到的坑,数据被后面设备覆盖,导致数据和前面的设备一样

在uniapp开发中使用canvas封装了一个叫cirlceTemp的组件(温度圆环图表) 封装的HTML代码 <template><view class"progress-box" :style"{ width: ${progressWidth}rpx, height: ${progressHeight}rpx }"><canvas class"progress-bg&qu…

linux病毒编写+vim shell编程

学习视频来自B站UP主泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 请一定遵循《网络空间安全法》&#xff01;&#xff01;&#xff01; Linux目录介绍 /bin 二进制可执行文件&#xff08;kali里面是工具一些文件&#xff09;/etc 系统的管理和配置文…

【小程序】dialog组件

这个比较简单 我就直接上代码了 只需要传入title即可&#xff0c; 内容部分设置slot 代码 dialog.ttml <view class"dialog-wrapper" hidden"{{!visible}}"><view class"mask" /><view class"dialog"><view …

【玩具蛇——DFS】

题目 代码 #include <bits/stdc.h> using namespace std; int g[5][5]; int dx[] {0, 0, -1, 1}, dy[] {-1, 1, 0, 0}; int ans; void dfs(int x, int y, int t) {g[x][y] t;if (t > 16){ans;g[x][y] 0;return;}for (int i 0; i < 4; i){int nx x dx[i], n…

aar打包以及混淆问题

我们做sdk&#xff0c;经常要打成aar包。 如何打aar包&#xff1f; 1、首先module必须是library 2、build.gradle写的应用aar和module&#xff0c;要改成compileOnly&#xff0c;这样打包的时候就不会报错&#xff0c;因为aar不允许包含其他aar 3、 4、 aar包如何混淆 bui…

hhdb数据库介绍(9-14)

SQL语法支持 DML语句 在关系集群数据库中&#xff0c;DML语句的逻辑将变的更为复杂。计算节点将DML语句分为两大类&#xff1a;单库DML语句与跨库DML语句。 单库DML语句&#xff0c;指SQL语句只需在一个节点上运行&#xff0c;即可计算出正确结果。假设分片表customer分片字…

IDEA旗舰版编辑器器快速⼊门(笔记)

简介&#xff1a;javaweb开发必备软件之IDEA期间版介绍 DEA编辑器器版本介绍 官⽹网&#xff1a;https://www.jetbrains.com/地址&#xff1a;https://www.jetbrains.com/idea/download/#sectionmac DEA 分社区版(Community) 和 旗舰版(Ultimate)&#xff0c;我们做JavaWeb开…