Vue3的fragment

2023-11-13

vue2时,组件的模板结构中出现多个标签时,需要使用根标签
vue3时,组件的模板结构中出现多个标签时,可以不用根标签。这是因为vue3会自动将多个标签用fragment包裹。

举个例子。

  • main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  • App.vue
<template>
  <h2>当前和值为{{sum}}</h2>
  <h2>这台{{brand}}的售价是{{price}}</h2>
</template>

<script>
import { ref,reactive,toRefs} from 'vue';

export default {
  name:"App",
  setup(){
    let sum = ref(0);
    let car = reactive({
      brand:"BYD",
      price:"30W"
    })
    
    return {
      sum,
      ...toRefs(car)
    }
  }

}
</script>
  • 启动应用,测试效果
    在这里插入图片描述
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue3的fragment 的相关文章

随机推荐

  • Python-安装库-图像处理库-cv2

    问题 在pycharm中搜索cv2库 发现没有版本 在网上查找资料 找到了类似官方文档的资料 提到了安装方法 https pypi org project opencv python description cv2介绍 CV2指的是Open
  • ERROR 1064 (42000): You have an error in your SQL syntax

    mysql使用load data infile导入数据 出现如下错误 root NoName 21 19 12 gt load data infile change csv into table change CHARACTER SET u
  • JAVA基础知识点大全之二

    1 泛型 1 1 泛型类 定义格式 修饰符 class 类名 lt 类型 gt 1 2 泛型方法 定义格式 修饰符 lt 类型 gt 返回值类型 方法名 类型 变量名 1 3 泛型接口 定义格式 修饰符 interface 接口名 lt 类
  • c/c++多线程编程(1):线程的创建

    参考资料 多线程和线程同步 C C 运行环境 wsl2 Ubuntu 20 04 vscode clangd xmake gcc9 4 0 1 创建线程 1 1 线程函数 每个线程都有一个属于自己的线程id id的类型为phtread t
  • 解决centos 8命令ip add无效问题

    之前用Xshell连接虚拟机一直正常 突然一台节点总是连不上 查询众多资料后 终于找到了问题所在 出错情况 输入命令 root node01 service NetworkManager start root node01 nmcli ne
  • 图腾柱电路工作原理

    图腾柱就是上下各一个晶体管 上管为NPN c极接正电源 下管为PNP e极接负电源 注意 是负电源 是地 两个b极接到一起 接输入 上管的e和下管的c接到一起 接输出 用来匹配电压 或者提高IO口的驱动能力 有几种图腾柱电路的变种 一种是两
  • Log4j2安全 JNDI漏洞 CVE-2021-44228

    Apache Log4j2是基于Java的日志记录工具 工具重写了Log4j框架 并且引入了大量丰富特性 该日志框架被大量用于业务系统开发 用来记录日志信息 大多数情况下 开发者可能会将用户输入导致的错误信息写入日志中 因该组件使用极为广泛
  • linux内核态发送tcp包,Linux内核发送构造数据包的方式

    本文欢迎自由转载 但请标明出处 并保证本文的完整性 作者 Godbach 日期 2009 09 01 一 构造数据包简析 这里并不详细介绍如何在内核中构造数据包 下文如有需要会在适当的位置进行分析 这里简单的分析讲一下内核态基于Netfil
  • 系统掌握数据结构8 树与二叉树 第二节

    树与二叉树 2节 1 线索二叉树的逻辑结构 2 线索二叉树的物理结构 3 中序线索二叉树 3 1 逻辑结构 3 2 代码实现 4 先序线索二叉树 5 后序线索二叉树 6 三叉链表的物理结构 7 先序线索二叉树的三叉链表存储实现 8 后序线索
  • 【转】C#操作sqlServer数据库

    转载地址 https blog csdn net weixin 42731241 article details 81172622 工具 vs2015 SqlServer 数据库的连接及打开关闭 VS2015建立一个c 的控制台应用程序 必
  • 10个 解放双手的 IDEA 插件,让你少写冤枉代码

    公众号关注 GitHubDaily 设为 星标 每天带你逛 GitHub 友情提示 插件虽好 可不要贪装哦 装多了会 卡 卡 卡 正经干活用的 分享一点自己工作中得心应手的 IDEA 插件 可不是在插件商店随随便便搜的 都经过实战检验 用过
  • 两种通过aop设置重试机制的方式

    注意 1 不要在同一个类中调用自定义的注解 如果controller调用 注解要放在service层 其他类 2 如果有配置aop扫描的包 不能只设置扫描control下的文件 方式一 controller层 RequestMapping
  • Map

    1 说明 系统根据C Reference学习下STL gt Map 2 Map Maps are associative containers that store elements formed by a combination of a
  • 攻略:Windwos 系统中应用程序访问权限

    在Windwos XP系统中 存在着两种类型的账户 即隶属于Administrators组中的管理员账户和隶属于Users组中受限制的用户 默认情况下 管理员账户可以无限制地运行计算机中的所有程序 包括XP系统内建的以及自行安装的应用程序
  • Vue常用指令详解分析

    Vue入门 Vue是一个MVVM Model View ViewModel 的前端框架 相对于Angular来说简单 易学上手快 近两年也也别流行 发展速度较快 已经超越Angular了 比较适用于移动端 轻量级的框架 文件小 运行速度快
  • 2023AI会议时间表(持续更新)

    本文已参与 新人创作礼 活动 一起开启掘金创作之路 这篇文我会持续更新 小伙伴们可以收藏 尤其是有发论文需求的同学 当然了 如果你上网方便 有耐心的话 也可以直接上这个网站去查看 只不过要筛选一下 我这里主要是把机器学习还有我自己比较相关的
  • 【牛客网 - 华为机试】HJ59 找出字符串只出现一次的字符

    HJ59 找出字符串只出现一次的字符 题目描述 找出字符串中第一个只出现一次的字符 输入描述 输入几个非空字符串 输出描述 输出第一个只出现一次的字符 如果不存在输出 1 示例1 输入 asdfasdfo aabb 输出 o 1 impor
  • C++去掉字符串前后的多余空格

    C 中std string 没有可以直接去掉字符串前后多余空格的接口 所以自己实现了一个 借鉴Qt中QString的trimmed 函数源码实现的版本 去掉std string 字符串前后的空格 void string trimmed st
  • vscode连接服务器

    使用VScode连接服务器的好处在于 vscode可以当成一个网页端的IDE 而使用Pycharm连接服务器则存在文件的同步问题 而且很慢 此处保险起见 加一个前提条件 to the best of our knowledge 步骤一 安装
  • Vue3的fragment

    vue2时 组件的模板结构中出现多个标签时 需要使用根标签 vue3时 组件的模板结构中出现多个标签时 可以不用根标签 这是因为vue3会自动将多个标签用fragment包裹 举个例子 main js import createApp fr