Vue3【六】setup的使用和setup的返回值

Vue3【六】setup的使用和setup的返回值

setup函数的使用,和vue2的选项式不同 vue3的组合式使用的是setup函数
通过返回值将数据和方法传到页面
返回值也可以是一个箭头函数
setup先于 data和method执行所有无法读取到this和data,method的内容,反之可以

案例截图

在这里插入图片描述

目录结构

在这里插入图片描述

所有

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">
import { createLogger } from 'vite';export default {name: 'Person', //组件名字setup() {// console.log(this) // setup函数中的this是undefined// 数据 原来vue2写在data中,此时的数据不是响应式的,改变不会被渲染到模板let name = "太上老君"let age = 18000let add = '太上老君是公认的道教始祖,即道教中具有开天创世与救赎教化的太上道祖。'function showAdd() {alert(add)}function changeName() {name = name == "太白金星" ? '太上老君' : '太白金星' //这样修改不会渲染到页面console.log(name) //name确实改了,但不是响应式的}function changeAge() {age += 1console.log(age)}// 将数据方法交出去。模板中才可以使用return {name, age, add,showAdd,changeName,changeAge}// setup的返回值也可以是一个渲染函数// return ()=>'箭头函数返回值'}}</script><style>
.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/news/849452.shtml

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

相关文章

顶顶通呼叫中心中间件-asr录音路径修改(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-asr录音路径修改(mod_cti基于FreeSWITCH) 录音路径模板。如果不是绝对路径&#xff0c;会把这个路径追加到FreeSWITCH的recordings后面。支持变量&#xff0c;比如日期 ${strftime(%Y-%m-%d)}。最后一个录音文件路径会保存到变量 ${cti_asr_last_record_…

几个日期和时间相关的函数,用于格式化日期、时间和毫秒数

几个日期和时间相关的函数&#xff0c;用于格式化日期、时间和毫秒数。 javascript /** 返回年月日param {Date} date - 日期对象param {string} [splitor‘-’] - 分隔符&#xff0c;默认为’-’returns {string} - 格式化后的日期字符串&#xff0c;格式为YYYY-MM-DD */ exp…

Vue3实现当访问的路由不存在时跳转到404页面的方法详解

Vue3实现当访问的路由不存在时跳转到404页面的方法详解 一、前言1. 创建 404 组件2. 配置路由3. 使用 router-link 一、前言 在 Vue 3 中&#xff0c;你可以使用 Vue Router 来实现当访问的路由不存在时跳转到 404 页面。以下是详细的方法&#xff1a; 1. 创建 404 组件 首先…

03-3.2.4 双端队列

&#x1f44b; Hi, I’m Beast Cheng&#x1f440; I’m interested in photography, hiking, landscape…&#x1f331; I’m currently learning python, javascript, kotlin…&#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以订…

1348:【例4-9】城市公交网建设问题

【解题思路】 该题难点是要保存最小生成树的所有边&#xff0c;对于不同的求最小生成树的算法&#xff0c;有不同的方法来完成。 【参考代码】 prim算法 #include<bits/stdc.h> using namespace std; const int N 105; // 定义常量 N&#xff0c;表示数组大小 int n…

Vue3 时间格式化

1、基础使用 https://juejin.cn/post/6933548549321785352 2、template里面直接使用 $dayjs(info.patientBirthday).format("YYYY-MM-DD") 3、script里面使用 import { ref, reactive, getCurrentInstance } from "vue"; const { proxy } getCurren…

python的rolling_mean()函数

5.1 rolling_mean函数解释 pandas.rolling_mean(arg, window, min_periodsNone, freqNone, centerFalse, howNone, **kwargs)rolling_mean函数表示通过移动窗口求平均值&#xff0c;即用当前值和前[window]个数值取平均数&#xff0c;得到新的数值。 import pandas as pddata…

C语言详解(动态内存管理)1

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

Django 传递额外参数给视图函数

本书1-7章样章及配套资源下载链接: https://pan.baidu.com/s/1OGmhHxEMf2ZdozkUnDkAkA?pwdnanc 源码、PPT课件、教学视频等&#xff0c;可以从前言给出的下载信息下载&#xff0c;大家可以评估一下。 在Django框架中&#xff0c;URLconf模块还支持一种传递额外参数给视图函…

2024-06-07 Unity 编辑器开发之编辑器拓展8 —— Scene 窗口拓展

文章目录 1 Handles 类1.1 Scene 响应函数1.2 自定义窗口中监听 Scene1.3 Handles 常用 API2.2.1 颜色控制2.2.2 文本2.2.3 线段2.2.4 虚线2.2.5 圆弧2.2.6 圆2.2.7 立方体2.2.8 几何体2.2.9 移动、旋转、缩放2.2.10 自由移动 / 旋转 2 Scene 窗口中显示 GUI3 HandleUtility4 G…

Python 将CSV文件转为PDF文件

CSV文件通常用于存储大量的数据&#xff0c;而PDF文件则是一种通用的文档格式&#xff0c;便于与他人共享和打印。将CSV文件转换成PDF文件可以帮助我们更好地管理和展示数据。本文将介绍如何通过Python编程将CSV文件导出为PDF文件。 Python Excel库安装及介绍 在 Python 中&am…

[office] 对Excel工作表中的单元格区域命名以及利用命名定位单元格的方法 #知识分享#学习方法

对Excel工作表中的单元格区域命名以及利用命名定位单元格的方法 为了能方便地找到特定数据所在的单元格&#xff0c;同时也为了在编辑表格时能够方便地实现单元格的引用&#xff0c;以方便使用公式和函数进行计算&#xff0c;用户可以对单元格进行命名。下面介绍对Excel工作表…

GIGE 协议摘录 —— GVSP 协议(三)

系列文章目录 GIGE 学习笔记 GIGE 协议摘录 —— 设备发现&#xff08;一&#xff09; GIGE 协议摘录 —— GVCP 协议&#xff08;二&#xff09; GIGE 协议摘录 —— GVSP 协议&#xff08;三&#xff09; GIGE 协议摘录 —— 引导寄存器&#xff08;四&#xff09; GIGE 协议…

华为面经整理

文章目录 实习第一面准备提问相关算法相关 第一面结果提问环节 总结 实习 第一面准备 提问相关 操作系统有哪些功能 进程管理&#xff1a; 进程调度、进程同步和通信、多任务处理 内存管理&#xff1a; 内存分配、虚拟内存技术、内存保护 文件系统管理&#xff1a; 文件存储…

golang优雅代码【lock实现】

golang优雅代码【lock实现】 1.局部锁1.1 具体实现方式 本文代码风格来源参考 database/sql 包 1.局部锁 database/sql源码中使用 withLock(dc, func(){...}) 方法实现局部锁&#xff0c;完美利用了 golang 的 defer 关键字对 入参dc 进行加锁解锁&#xff0c;感觉实现很优雅…

基础概念解析:SOCKS5代理究竟是什么?SOCKS5代理ip使用场景有哪些?

在当今数字化时代&#xff0c;网络安全和隐私保护已成为我们日常生活中不可忽视的问题。随着网络攻击手段的日益复杂&#xff0c;如何安全地访问互联网资源成为了一个亟待解决的问题。SOCKS5代理作为一种先进的网络协议&#xff0c;为我们提供了解决这一问题的有效方案。 本文…

活动预热丨在 AGI Playground 2024 遇见一群 RTE+AI 的 Builders

6 月 22、23 日&#xff0c;北京。 AGI Playground 2024&#xff0c;这个夏日最火热的 AGI 盛会。 王小川、杨植麟等 AGI 创业者悉数参加。 RTE 开发者社区的 builders 和 RTE Open Day 也将在现场&#xff01; 我们将为大家呈现两大板块&#xff1a; 01 实时开发挑战 Wor…

OpenCV-最小外接圆cv::minEnclosingCircle

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 函数原型 void minEnclosingCircle(InputArray points, Point2f& center, float& radius); 参数说明 InputArray类型的…

input只允许输入数字

input只允许输入数字 <input id"phone" type"text" placeholder"输入手机号" maxlength"11" oninput"valuevalue.replace(/[^\d]/g,);if(value.length>11) valuevalue.slice(0,11)"/>input只允许输入字母和数字 …

从openstack环境中将服务器镜像导出的简单办法

1 登录openstack的页面&#xff0c;找到计划导出的主机信息。 通过实例名称&#xff0c; IP地址&#xff0c;找到对应的记录。点击实例名称&#xff0c;进入详情页。 在这里主要可以知道&#xff0c;当前主机在服务器上的文件ID&#xff0c;可以按这个ID去找对应的目录。 还可…