【vue】ref 和 reactive 对比

  • ref:存储单个数据,如数值,字符串
  • reactive:存储复杂数据,如对象,数组
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head><body><div id="app"><!-- 插值表达式 -->{{msg}}<h2>{{web.title}}</h2><h2>{{web.url}}</h2><h2>{{number}}</h2><h2>{{arr}}</h2></div><script>const { createApp, reactive, ref } = VuecreateApp({setup() {const number = ref(10)const arr = ref([1,2,3,4])//ref也能存数组number.value=20 //修改number的值const web = reactive({title: "tao355667",url: "tao355667.com"})return {msg: "success",web,number,arr}}}).mount("#app")</script>
</body></html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

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

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

相关文章

docker exec 命令提示:Error: No such container: /bin/bash

虽然是低级错误&#xff0c;但是还是记录一下吧。。。。。。。。 这个容器运行起来了&#xff0c;docker ps 是可以查询到的 但是 我想进入 容器内部时就出现了&#xff1a; docker exec -it /bin/bash e51b4dcdf51a Error: No such container: /bin/bash 开始以为是容器内部…

多项式拟合:最小二乘、拉格朗日插值、牛顿插值

多项式拟合是一种常用的数学和机器学习方法&#xff0c;它使用一个多项式函数来拟合一组数据点。多项式拟合的目的是在众多的样本点中找出满足样本点分布的多项式。它基于多项式函数的性质&#xff0c;可以表示为 yw0w1xw2x2…wnxn 的形式&#xff0c;其中 y 是因变量&#xff…

4.11学习总结

一.IO流 一.java中IO的初步了解 (一).概念: Java中I/O操作主要是指使用Java进行输入&#xff0c;输出操作. Java所有的I/O机制都是基于数据流进行输入输出&#xff0c;这些数据流表示了字符或者字节数据的流动序列。Java的I/O流提供了读写数据的标准方法。任何Java中表示数据…

html 实现多个文本内容,轮播效果类似gif图片

前几日&#xff0c;产品要求后端实现一个将文字转为gif图片&#xff0c;要用于官网首页广告栏。我想这不是前段就能实现吗&#xff0c;怎么还要求后端生成gif&#xff0c;然后前段在展示。你确定招的前段不是对手公司过来的卧底&#xff1f;&#xff1f;&#xff1f; <!DOCT…

asp.net core 网页接入微信扫码登录

创建微信开放平台账号&#xff0c;然后创建网页应用 获取appid和appsecret 前端使用的vue&#xff0c;安装插件vue-wxlogin 调用代码 <wxlogin :appid"appId" :scope"scope" :redirect_uri"redirect_uri"></wxlogin> <scri…

贪心算法|56.合并区间

力扣题目链接 class Solution { public:vector<vector<int>> merge(vector<vector<int>>& intervals) {vector<vector<int>> result;if (intervals.size() 0) return result; // 区间集合为空直接返回// 排序的参数使用了lambda表达…

解决vue启动项目报错:npm ERR! Missing script: “serve“【详细清晰版】

目录 问题描述问题分析和解决情况一解决方法情况二&#xff08;常见于vue3&#xff09;解决方法情况三解决方法 问题描述 在启动vue项目时通常在控制台输入npm run serve 但是此时出现如下报错&#xff1a; npm ERR! Missing script: "serve" npm ERR! npm ERR! T…

qt-C++笔记之获取当前文件名所在路径并拼接出新文件路径的一种方法

qt-C笔记之获取当前文件名所在路径并拼接出新文件路径的一种方法 code review! 运行 在 Qt 框架中&#xff0c;QFileInfo 和 QDir类通常用于文件系统信息的查询和目录管理。下面是按照这样一种新颖的步骤来拼接新文件路径的示例代码&#xff1a; #include <QFileInfo>…

微商商城源码小程序好用么?

商城APP作为电子商务行业的重要组成部分&#xff0c;已经成为了人们购物的主要方式之一。为了在竞争激烈的市场中脱颖而出&#xff0c;开发一款专业且思考深度的商城APP方案显得尤为关键。本文将从专业性和思考深度两个方面&#xff0c;探讨商城APP的开发方案。 一、专业性的重…

Qt Creator 12.0.2 debug 无法查看变量的值 Expression too Complex

鼠标放在局部变量上提示“expression too complex”。 在调试窗口也看不到局部变量的值。 这应该是qt的一个bug&#xff0c;https://bugreports.qt.io/browse/QTCREATORBUG-24180 暂时解决方法&#xff1a; 如下图&#xff0c;需要右键项目然后执行"Clean"和&quo…

Blazor OIDC 单点登录授权实例7 - Blazor hybird app 端授权

目录: OpenID 与 OAuth2 基础知识Blazor wasm Google 登录Blazor wasm Gitee 码云登录Blazor OIDC 单点登录授权实例1-建立和配置IDS身份验证服务Blazor OIDC 单点登录授权实例2-登录信息组件wasmBlazor OIDC 单点登录授权实例3-服务端管理组件Blazor OIDC 单点登录授权实例4 …

Kyligence 发布企业级 AI 解决方案,Data + AI 落地迈向新阶段

4月11日&#xff0c;Kyligence 2024 数智论坛暨春季发布会成功召开。Kyligence 正式发布全新的企业级 AI 解决方案&#xff0c;基于服务金融、零售、制造、医药等行业领先客户的落地实践&#xff0c;Kyligence 为企业提供准确、可靠、智能的 AI 指标平台一站式解决方案&#x…