Vue3【七】setup的语法糖setup简写方法

Vue3【七】setup的语法糖setup简写方法

Vue3【七】setup的语法糖setup简写方法
使用script标签式写法称为setup语法糖
组件名称默认位文件名
export 的内容可以省略

案例截图

setup语法糖

案例目录

在这里插入图片描述

案例代码

Person.vue

<template><div class="person"><h1>我是Person组件</h1><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }} </h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showAdd">查看信息</button></div>
</template><script lang="ts" setup>
let name = "太上老君"
let age = 18000
let add = '太上老君是公认的道教始祖,即道教中具有开天创世与救赎教化的太上道祖。'
function showAdd() {alert(add)
}
function changeName() {name = name == "太白金星" ? '太上老君' : '太白金星'console.log(name)
}
function changeAge() {age += 1console.log(age)
}
</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>

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

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

相关文章

这才是计科之 Onix XV6 源码分析(1、XV6-x86的启动)

这才是计科之 Onix & XV6 源码分析&#xff08;1、XV6-x86的启动&#xff09; 前言 Onix是一款相对于XV6来说功能更为健全的单核OS&#xff0c;由于功能更加完善&#xff0c;Onix也更加复杂。代码阅读起来会比较绕。 XV6是一款简单易读的多核操作系统&#xff0c;但其功…

【JMeter接口测试工具】第一节.JMeter简介和安装【入门篇】

文章目录 前言一、JMeter简介 1.1 JMeter基本介绍 1.2 JMeter优缺点二、JMeter安装 2.1 JMeter安装步骤 2.2 JMeter环境配置三、项目介绍 3.1 项目简介 3.2 API接口清单总结 前言 一、JMeter简介 1.1 JMeter基本介绍 JMeter 是 Apache 组织使用…

java---程序逻辑控制(详解)

目录 一、概述二、顺序结构三、分支结构3.1 if语句3.1.1 语法格式13.1.2 语法格式23.1.3 语法格式3 3.2 练习3.2.1 判断一个数字是奇数还是偶数3.2.2 判断一个数字是正数&#xff0c;负数&#xff0c;还是零3.2.3 判断一个年份是否为闰年 3.3.switch语句 四、循环结构4.1 while…

Flutter vscode环境如何进行真机测试

目录 1. 准备工作 1.1 安装Flutter和VS Code 1.2 安装必要的VS Code扩展 1.3 手机设置 2. 配置VS Code调试环境 3. 手机如何退出开发者模式 1. 准备工作 1.1 安装Flutter和VS Code 确保你已经在电脑上安装了Flutter SDK和VS Code。如果还没有&#xff0c;可以参考以下指…

项目文章 | Nature Commun蓝藻转录因子PhoB对磷/铁的营养元素限制的调控机制

近日&#xff0c;华中师范大学邱保胜教授团队在《Nature Communications》发表题为“Phosphorus deficiency alleviates iron limitation in Synechocystis cyanobacteria through direct PhoB-mediated gene regulation”文章&#xff0c;其重点研究了Synechocystis蓝藻转录因…

硬件产品经理

边端协调管理平台 主页模型管理配置管理设备管理设备检测组态数据服务传输通道服务 定义与范围&#xff1a; 边测&#xff1a;通常指的是边缘计算的测试&#xff0c;这里的“边缘”可以理解为离用户更近的计算节点或设备&#xff0c;如小 型数据中心、具有计算能力的小基站等。…

深度学习课程设计:构建未来的教育蓝图

深度学习课程设计&#xff1a;构建未来的教育蓝图 在近年来&#xff0c;深度学习已经从一项前沿的技术发展成为计算机科学领域不可或缺的一部分。随着其在多个行业中的应用日益增多&#xff0c;对深度学习教育的需求也在急剧上升。对于计划将深度学习纳入学术课程的教育者而言…

【WRF理论第二期】运行模型的基础知识

WRF理论第二期&#xff1a;运行模型的基础知识 1 Basics for Running the Model2 Geogrid程序2.1 Geogrid2.2 Terrestrial Input Data 3 Ungrid程序3.1 Ungrid3.2 Intermediate Files3.3 Required Fields 4 Metgrid程序参考 官方介绍-Basics for Running the Model 本博客主要…

耐用好用充电宝有哪些?畅销排行榜前四款充电宝推荐

在日常生活中&#xff0c;一款耐用且好用的充电宝是我们出行必备的利器&#xff0c;它可以为我们的手机、平板等设备提供持续的电力支持。然而&#xff0c;在市面上琳琅满目的充电宝品牌中&#xff0c;究竟哪些才是真正耐用又好用的选择&#xff1f;为了帮助大家更好地了解市场…

Qt5学习笔记(一):Qt Widgets Application项目初探

笔者长期使用MFC开发Windows GUI软件。随着软件向Linux平台迁移的趋势越发明朗&#xff0c;GUI程序的跨平台需求也越来越多。因此笔者计划重新抓一下Qt来实现跨平台GUI程序的实现。 0x01. 看看Qt Widgets Application项目结构 打开Qt5&#xff0c;点击“ New”按钮新建项目。…

基于Kubernetes和DeepSpeed进行分布式训练的实战教程

目录 ​编辑 一、前期准备 二、部署和配置训练任务 三、编写和运行训练代码 四、监控和调优 五、代码实现 5.1. Dockerfile 5. 2. DeepSpeed 配置文件 (ds_config.json) 5.3. Kubernetes 部署文件 (deployment.yaml) 5.4. PyTorch 训练脚本 (train.py) 注意事项&am…

windows任意窗口置顶/前台显示/不被最小化或遮挡

问题&#xff1a;在办公时&#xff0c;当同时需要打开好几个重要的窗口&#xff0c;比如需要对若干个文件夹里的文件进行操作&#xff0c;几个窗口都需要一直在桌面前台显示&#xff0c;但这样的话容易在打开其他页面或是切其他窗口的时候被遮挡&#xff0c;因此考虑如何让几个…

我们如何用npm发布自己的插件包?详细的教程来了

一、什么是npm插件&#xff1f; npm&#xff08;“Node 包管理器”&#xff09;是 JavaScript 运行时 Node.js 的默认程序包管理器。npm插件是指通过npm安装的第三方包&#xff0c;可以在Node.js项目中直接使用。这些插件涵盖了各种领域&#xff0c;包括Web开发、数据测试、构建…

用于精准治疗和预防细菌感染的生物功能脂质纳米颗粒

引用信息 文 章&#xff1a;Biofunctional lipid nanoparticles for precision treatment and prophylaxis of bacterial infections. 期 刊&#xff1a;Science Advances&#xff08;影响因子&#xff1a;13.6&#xff09; 发表时间&#xff1a;2024年4月5日 作 者&a…

【Python Cookbook】S01E21 文本模式的匹配和查找 match()、search()、findall() 以及 捕获组和 + 的含义

目录 问题解决方案讨论 问题 本文讨论一些按照特定的文本模式进行的查找和匹配。 解决方案 如果想要匹配的只是简单文字&#xff0c;通常我们使用一些内置的基本字符串方法即可&#xff0c;如&#xff1a;str.find()&#xff0c;str.startwith()&#xff0c;str.endswith() …

Docker:搭建实用的个人IT工具箱IT-Tools

请关注微信公众号&#xff1a;拾荒的小海螺 博客地址&#xff1a;http://lsk-ww.cn/ 1、简述 IT-Tools是一款开源的个人工具箱&#xff0c;专为IT从业人员打造&#xff0c;支持Docker私有化部署&#xff0c;包含众多实用的IT工具。其功能丰富多样&#xff0c;涵盖二维码生成、…

SpringBootWeb 篇-深入了解 AOP 面向切面编程与 AOP 记录操作日志案例

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 AOP 概述 1.1 构造简单 AOP 类 2.0 AOP 核心概念 2.1 AOP 执行流程 3.0 AOP 通知类型 4.0 AOP 通知顺序 4.1 默认按照切面类的类名字母排序 4.2 用 Order(数字) 注…

Redis集群之高可用可水平扩展

文章目录 一、Redis集群方案比较二、Redis高可用集群搭建三、Java操作redis集群四、集群的Spring Boot整合Redis 一、Redis集群方案比较 在redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态&#xff0c;如果master节点异 常&#xff0c;则会做主…

解决nvidia驱动和CUDA升级问题

解决nvidia驱动和CUDA升级问题 注释&#xff1a;升级高版本的nvidia驱动和cuda是不影响现有的docker镜像和容器的。因为是向下兼容的。仅仅升级后重启服务器即可。 ERROR: An NVIDIA kernel module ‘nvidia-drm’ appears to already be loaded in your kernel. This may be…

Java(十二)——Comparable接口与Comparator接口

文章目录 Comparable与Comparator接口Comparable接口Comparator接口 Comparable与Comparator接口 我们可能会遇到这样的问题&#xff1a;怎么对一个对象数组进行排序&#xff1f; 比如对一个狗类对象数组进行排序&#xff0c;而想到这&#xff0c;我们又会有一个问题&#xff…