vue3的setup函数中定义data数据,使用data数据

这篇具有很好参考价值的文章主要介绍了vue3的setup函数中定义data数据,使用data数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3保留了vue2的语法,但是不能混着用,setup中定义原有vue2中data数据的方法有所改变

直接上代码

import { reactive } from 'vue'
export default {
    setup() {
        const  info = reactive ({
            name:'张三',
            age:18
        }),
    }
    return { info};
}

对比原有vue2代码

data() {

            return {

                name: "张三",

                age:18

            }

    }

在setup函数中使用数据也无需this.xxx,而是用你定义的名字,我定义的是info(也可也换成其他)则用info.name文章来源地址https://www.toymoban.com/news/detail-530674.html

到了这里,关于vue3的setup函数中定义data数据,使用data数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 01-setup函数

    1.setup函数的作用: 一开始创建vue3页面的时候是这样的 给容器传参在页面中显示 数据给模板使用,以前是data选项中即可,现在在setup中直接定然后返回,模板中即可使用 3.通过打印方式发现setup函数比beforeCreate 执行更早;setup中没有this组件实例 4.通过点击事件控制台显示内容 5.通

    2024年02月11日
    浏览(28)
  • vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model

    目录 setup函数 props参数 案例 第一种写法(用setup函数的方式):  第二种方法(语法糖形式即setup写入script标签中)也可以传值,  context (attrs,emit,slots) vue3中的双向数据绑定自定义事件emit和v-model emit自定义事件 v-model 有两个参数分别是 props,context 即 props参数是一个 对象 ,

    2024年02月10日
    浏览(32)
  • vue3中<script setup> 和 setup函数的区别

    script setup  是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的  script  语法,它具有更多优势: 更少的样板内容,更简洁的代码。 能够使用纯 TypeScript 声明 props 和自定义事件。 更好的运行时性能 (其模板

    2024年02月04日
    浏览(32)
  • 深入理解 Vue3 中的 setup 函数

    💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互

    2024年02月19日
    浏览(29)
  • vue3 setup中函数表达式和函数声明

    随着 Vue 3 中 Composition API 的引入,现在可以通过函数表达式和函数声明这两种方式声明函数。 函数声明是在非函数式编程语言中声明函数的传统或正常方式。以 function 开头,后跟函数名称、一对括号,最后是一对括住函数体的花括号。 这是一个例子: 函数声明的一个

    2024年02月13日
    浏览(30)
  • Vue3通透教程【六】setup语法糖、computed函数、watch函数

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年01月20日
    浏览(33)
  • Vue3 - 如何将 reactive() 创建的响应式数据 “轻松“ 恢复成初始数据值,重置 reactive() 定义的数据使其恢复成初始定义的数据结构(使用一个函数轻松解决,并且不丢失响应式)

    典型的场景就是我有一个表单,用户输入了一些内容后,点击提交后程序需要 “重置表单” 把上次填过的内容重置掉。 本文实现了 一个函数重置 reactive 创建的数据,恢复 “最开始时的数据结构和默认值,” 你可以直接复制本文提供的函数,有三种方案可选。 直接调用函

    2024年02月11日
    浏览(42)
  • 前端笔记之vue3 之 render函数和createVNode函数使用

    初学vue3的时候倒是扒了一点点源码,似是而非,而且一直做的工作都是很简单的功能,怎么说呢,ui框架也几乎让我很容易的就可以写出一个成型的页面,有时就忘了初学的时候的一些心得。 本内容只说createVNode函数的用法,不做源码探究 效果图: 虽然在日常中这么写特别

    2024年02月07日
    浏览(35)
  • vue3 setup+Taro3 调用原生小程序自定义年月日时分多列选择器,NutUI改造

    NutUI 有日期时间选择器,但是滑动效果太差,卡顿明显。换成 原生小程序 很顺畅 上代码: 若需要自定义年开始时间,见 initColumn 方法 如作为组件,通过父级传递,可使用:

    2024年02月13日
    浏览(33)
  • vue3使用setup代替created

    vue2中的created可使用vue3中的setup()来代替。 setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method。 如果想要在页面创建时就执行方法, vue2: vue3: vue3使用setup语法糖:

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包