首页 > 其他分享 >ref和reactive分别编写的计数器

ref和reactive分别编写的计数器

时间:2024-07-22 22:29:17浏览次数:9  
标签:status count const state reactive 计数器 ref

使用ref函数和reactive函数写的技术器小程序,ref的实现用到了reactive,推荐使用ref,代码

点击查看代码
<script > //setup是组合是API的体现
import {reactive, ref} from 'vue'
  export default{
    
    setup() {
      const status=reactive({
        count:0
      })
      const state=ref(0)
      const setCount1=()=>{
        status.count++
      }
      const setCount2=()=>{
        state.value++
      }
      return {
        status,
        setCount1,
        state,
        setCount2
      }
  }
}
</script>


<!-- //模板支持多个根目录 -->
<template>
  <div>
  <button @click="setCount1">{{ status.count }}</button>
  <button @click="setCount2">{{ state }}</button>
</div>
</template>

<style scoped>
button{
  height: 30px;
  width: 30px;
}
</style>

标签:status,count,const,state,reactive,计数器,ref
From: https://www.cnblogs.com/xjZhang/p/18317137

相关文章

  • 使用Java和Reactive Streams构建流式应用
    使用Java和ReactiveStreams构建流式应用大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!今天,我们将深入探讨如何使用Java和ReactiveStreams构建流式应用。流式应用能够高效处理异步数据流,尤其适合处理大量数据和实时数据的场景。ReactiveStreams是一个......
  • document.referrer详解
    本文由ChatMoney团队出品document.referrer是JavaScript中的一个属性,它提供了访问当前页面的来源页面的URL。定义与基础使用document.referrer是一个只读属性,返回的是浏览器从哪个页面链接访问了当前页面。例如,如果用户点击了一个链接从A页面跳转到了B页面,那么在B页面中docu......
  • 如何修复此错误:由于以下原因无法加载 REFPROP (REFPRP64.dll):126?
    错误我试图通过更改环境变量来解决这个问题。但它不起作用。已经安装了所有库,并且REFROP安装在C:\ProgramFiles(x86)\REFPROP中。ALTERNATIVE_REFPROP_PATH:您能帮我修复代码中的此错误吗?屏幕截图错误代码126表示“找不到指定的模块”。这意味......
  • C++引用(reference)
    在C++中,引用(reference)是一个已存在变量的别名,它允许你为变量提供一个或多个额外的名字。引用在定义时必须初始化,并且一旦初始化后,就不能再引用其他变量。引用和它所引用的变量共享相同的内存地址。以下是C++中引用的基本用法:cpp#include<iostream>intmain(){inta=10;......
  • C. Least Prefix Sum
    链接https://codeforces.com/problemset/problem/1779/C题目思路1-m的前缀和最小。那么显然知道[1,m-1]的前缀和更大,所以a[m]<0,同理a[m-1]+a[m]<0,...,a[2]+...+a[m]<0。采用大根堆优先队列管理其中的值,如果上面的任何一个大于零,弹出优先队列的top,减掉两倍的top,让他重新变成......
  • LLM基础模型系列:Prefix-Tuning
    ------->更多内容,请移步“鲁班秘笈”!!<------PrefixTuning和PromptTuning最大的区别就是向每层的TransformerBlock添加可训练的张量,而上一期的PromptTuning只是在输入的时候添加。此外,通过全连接层(具有两层的迷你MLP和介于两者之间的非线性激活函数)来进行桥接。下图左侧......
  • SharedPreferences 和 MMKV 是何方神圣
    一、概述SharedPreferences和MMKV都是Android平台保存本地数据的工具,用于保存一些常用配置。二、SharedPreferences1.类似Map集合,将Key-Value对存储于硬盘上的XML文件,以XML文件的形式保存在/data/data/包名/shared_prefs目录下。数据较多时会有性能问题。2.SharedPrefe......
  • 题解:CF1381A1 Prefix Flip (Easy Version)
    思路这道题直接用下一题的代码就行了\(C1\):注意到限制\(3n\)很大,于是看每一位是不是一样的,再操作,如样例一:转化第一位:\(01\to11\)。转化第二位:\(11\to00\to10\)。每次把当前位子提到第一位,然后翻转第一位,最后翻转回去,最多\(3n\)次,不用暴力操作直接计答案时间复杂度......
  • Error: Expected ref to be a function, a string, an object returned by React.crea
    1、完整报错:Error:Expectedreftobeafunction,astring,anobjectreturnedbyReact.createRef(),ornull.atcoerceRef(react-dom.development.js:14873:1)atreconcileSingleElement(react-dom.development.js:15723:1)atreconcileChildFibers(re......
  • 深入探讨 Vue 3 中的 `ref` 和 `reactive`:你需要知道的一切
    深入探讨Vue3中的ref和reactive:你需要知道的一切在Vue3中,响应式系统是其核心特性之一。它使得数据和视图能够自动同步更新,从而简化了开发过程。在这个系统中,ref和reactive是两个非常重要的API。虽然它们都用于创建响应式数据,但它们的使用场景和工作原理却有所不同。......