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 的相关文章

  • You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to ex

    vue3项目启动之后 会提示如下警告 You are running the esm bundler build of vue i18n It is recommended to configure your bundler to expl
  • Vue3中的computed函数详解

    计算属性是Vue中常用的一种方式 主要用于在模板中放置逻辑计算 方便开发者进行数据操作和展示 在Vue3中 计算属性依然是非常重要的一种功能 而computed函数则更加的方便计算属性的使用 本文将对Vue3中的computed函数进行详细
  • vue3 的 ref、 toRef 、 toRefs

    1 ref 对原始数据进行拷贝 当修改 ref 响应式数据的时候 模版中引用 ref 响应式数据的视图处会发生改变 但原始数据不会发生改变
  • vue3+Element-plus el-select 下拉表格组件(2023-08-21 解决TSelectTable组件表单编辑回显设置defaultSelectVal 无效)

    2023 08 21 解决TSelectTable组件表单编辑回显设置defaultSelectVal 无效 2023 06 28 TSelectTable组件新增查询条件 效果如下 一 最终效果 二 代码示例
  • Vue3 + Element Plus 按需引入 - 自动导入

    文章目录 1 前言 1 1 目的 1 2 最终效果 2 准备工作 3 按需引入 3 1 安装插件 3 2 修改 vite config ts 文件 4 其他 4 1 ElMessageBox 使用时报错 4 1 1 Eslint 报错 El
  • Vue3全局提示(Message)

    Vue2全局提示 Message 可自定义设置以下属性 自动关闭的延时 duration 类型 number 单位ms 默认 3000ms 消息距离顶部的位置 top 类型 number 单位px 默认 30px 调用一次只展示一个提示 调
  • vue3-实战-04-管理后台表单校验-layout-菜单组件封装

    目录 1 自定义校验规则 2 layout组件静态页面搭建 3 logo组件封装 4 左侧菜单静态组件搭建 4 1 动态获取菜单数据 4 2 封装菜单动态展示组件 4 3 配置菜单名称 隐藏 图标属性 4 4 菜单刷新定位当前菜单 5 内容
  • vue3知识点:setup

    文章目录 二 常用 Composition API 1 拉开序幕的setup setup的两个注意点 本人其他相关文章链接 二 常用 Composition API 问题 啥叫 组合式API 答案 请看官方文档 https v3 cn vu
  • vue3+ts深入组件(四)动态组件

    一 引入 掌握程度 了解 使用Vue时 有时会遇到tab切换 如下图 1 可实现方法 1 v if 2 component动态组件 3 使用vue Router 路由切换 2 对比 第一种方法 v if 这可能是我们能最快想到的解决办法 但
  • 不习惯的 Vue3 起步六 の Echarts绘制下钻地图

    序 看过一些可视化大屏展示地图的例子 准备动手做做 既然要开始比制作 那么先把目标定好 做一个展示中国城市的下钻地图 使用 Vue3 Vite Typescript echarts 实现效果 准备工作 创建项目 因为准备使用Vue3 Vit
  • 微信小程序反编译微信小程序

    微信小程序反编译跳一跳 项目地址 https github com shunyue1320 decompile wx 反编译 wxapkg 文件 微信开发者工具打开
  • electron-vue2 项目初始化

    不要使用网上或者 github 的模板初始化项目 直接上代码 安装 vuecli 脚手架 npm update vue cli 初始化 project name 项目 vue create project name 进入项目 cd proj
  • Vue2转Vue3快速上手第一篇(共两篇)

    Vue3 v2 v3的学习成本不高 只要有v2基础 基本可以上手vue3 一 setup语法 setup中不能访问v2的配置比如data methods等 二 ref响应数据 使用ref可以创建一个对象 可以是基本类型 也可以是对象 例如
  • Vue实例挂载的过程

    一 思考与分析 我们都听过知其然知其所以然这句话 那么不知道是否思考过new Vue 这个过程中究竟做了些什么 过程中是如何完成数据的绑定 又是如何将数据渲染到视图的等等 首先找到vue的构造函数 源码位置 src core instanc
  • vue3配置eslint 出现问题

    vue3配置eslint 出现问题 标题必须使用导入来加载 ES 模块 ESlint Error Must use import to load ES Module 加上这一行即可
  • vue3-实现父子组件之间的通信(详解+源码)

    前言 vue3相对于vue2的父子传参方式有所改变 本文介绍三种 父组件给子组件传参 父组件调用子组件内的方法 子组件调用父组件的方法 如果不需要一种一种看可以直接下滑看全部代码 有注释也蛮好理解 一 父组件给子组件传参 1 父组件给子组件
  • 07Vue3-Vuex中计算数学getters应用

    getters Home vue
  • vue3中实现el-dialog弹窗

    vue3中的父子组件传递依然和vue2中的一样使用props和emit 但是写法略有不同 emit 自定义事件 子传父 props 父传子 父组件中
  • vue3学习笔记(1)script引入vue3实现简单应用

    Vue3专栏入口 目录 一 脚本引入简单使用 二 双向绑定的基本表现 一 脚本引入简单使用 script引入 简单使用实现数据渲染 div h1 counter num h1 div
  • 【Vue3.0实战逐步深入系列】使用elementui组件库element-plus美化投票功能

    千字长文 熬夜更新 原创不易 多多支持 感谢大家 前言 小伙伴们大家好 前面一篇文章中我们利用vue3 0实现了一个超级简单的投票功能 虽然功能是实现了也达到了巩固vue3 0知识点的目的 但是页面没有添加任何样式也没有进行任何的UI设计

随机推荐

  • 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