vue3使用mixins

news2025/3/13 13:12:09
<template>
  <div>{{ num }}___{{ fav }}</div>
  <button @click="favBtn">改变值</button>
</template>

<script setup lang="ts">
import mixin from "../mixins/mixin";
let { num, fav, favBtn } = mixin();
defineExpose({ num, fav, favBtn });
</script>

<style></style>
../mixins/mixin.ts:
import { ref } from "vue";
export default function() {
    let num = ref(1);
    let fav = ref(false);
    let favBtn = () => {
        num.value += 1;
        fav.value = true;
        setTimeout(() => {
            fav.value = false;
        }, 2000)
    }

    return {
        num,
        fav,
        favBtn
    }
}

效果图:
在这里插入图片描述

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

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

相关文章

【微服务核心】Spring Boot

Spring Boot 文章目录 Spring Boot1. 简介2. 开发步骤3. 配置文件4. 整合 Spring MVC 功能5. 整合 Druid 和 Mybatis6. 使用声明式事务7. AOP整合配置8. SpringBoot项目打包和运行 1. 简介 SpringBoot&#xff0c;开箱即用&#xff0c;设置合理的默认值&#xff0c;同时也可以…

【MySQL】数据库之日志管理、备份与恢复

目录 一、MySQL的日志管理 二、MySQL的完全备份与恢复 物理冷备份&#xff08;完全备份&#xff09;与恢复 数据库上云迁移的方案&#xff1f; 逻辑热备份&#xff08;完全备份&#xff09;与恢复 三、MySQL的增量备份与恢复 1、手动增量备份 2、脚本增量备份 3、增量备…

归并排序之C++实现

描述 归并排序是一种经典的排序算法&#xff0c;采用分治的思想。 归并排序是一种基于分治思想的经典排序算法。它将待排序的数组不断地分成两个子数组&#xff0c;直到每个子数组只有一个元素。然后&#xff0c;对每个子数组进行归并排序&#xff0c;即不断地将两个有序的子数…

ros2中ros_gz_bridge/gazebo安装的注意事项

这个搞错了&#xff1a;这个是安装ros_gz_bridge的&#xff0c;不是安装gazebo的 AT:如果是安装的Harmonic&#xff0c;在安装ros_gz_bridge的时候要从源码编译 ros2完整版里面好像已经包含了gazebo的一个版本 包名应该就是叫ros-humble-ros-ign-gazebo 所以gazebo是作为一个普…

使用tesla gpu 加速大模型,ffmpeg,unity 和 UE等二三维应用

我们知道tesla gpu 没有显示器接口&#xff0c;那么在windows中怎么使用加速unity ue这种三维编辑器呢&#xff0c;答案就是改变注册表来加速相应的三维渲染程序. 1 tesla gpu p40 p100 加速 在windows中使用regedit 来改变 核显配置&#xff0c; 让p100 p40 等等显卡通过核显…

docker-compose部署kafka

docker-compose.yml配置 version: "3" services:kafka:image: bitnami/kafka:latestports:- 7050:7050environment:- KAFKA_ENABLE_KRAFTyes- KAFKA_CFG_PROCESS_ROLESbroker,controller- KAFKA_CFG_CONTROLLER_LISTENER_NAMESCONTROLLER- KAFKA_CFG_LISTENERSPLAIN…

国企和互联网怎么选?

2023年马上就要结束了&#xff0c;天气还是很冷&#xff0c;大家今年的总结做了吗&#xff1f; 正好这两天看到另外一个我关注的博主更新了一个自己的年终总结。其中有一些话令人印象深刻。 未来对我来说&#xff0c;毫无吸引力。原因很简单&#xff0c;当下已经足够令人清醒、…

WordPress主题大前端DUX v8.3源码下载

DUX主题8.3版本更新内容&#xff1a; 新增&#xff1a;Cloudflare Turnstile 免费验证功能 新增&#xff1a;子菜单页面模版&#xff0c;支持多级页面 新增&#xff1a;手机端文章内表格自动出现横向滚动条&#xff0c;可集体或单独设置滚动宽度 新增&#xff1a;标签云页面模版…

Linux:jumpserver过滤命令(5)

我们分配完Linux资产后&#xff0c;如果想让用户无法执行某些命令可以直接写入过滤&#xff0c;当执行带有改字段就会自动拒绝 注意&#xff1a;是字段 当我们禁用了passwd&#xff0c;全部带有passwd的东西都会被禁掉 passwd修改密码的命令和/etc/passwd都会被禁了&#xf…

tensorrt环境安装-可用于深度学习模型加速推理

安装python环境 在anaconda的命令行中输入conda create --name py38 python3.8 安装python环境 然后安装深度学习框架pytorch环境 Previous PyTorch Versions | PyTorch 在这里面选择合适的环境 conda install pytorch1.8.0 torchvision0.9.0 torchaudio0.8.0 cudatoolki…

智能优化算法应用:基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.驾驶训练算法4.实验参数设定5.算法结果6.…

【yolov5问题解决】Dataset autodownload failure

自己下载该数据集 https://github.com/ultralytics/yolov5/releases/download/v1.0/coco128.zip 然后解压放到平行目录下

算法(图网格)-岛屿问题-岛屿数量

岛屿数量 给你一个由 ‘1’&#xff08;陆地&#xff09;和 ‘0’&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以…

Qt 中使用 MySQL 数据库保姆级教程(上)

作者&#xff1a;billy 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 前言 在 Qt 中默认只搭载了 QSqlLite 数据库驱动&#xff0c;若要使用其他数据库需要自己下载数据库&#xff0c;并将数据库驱动加载到…

SaaS医院信息化云his系统源码带电子病历+LIS系统

一、系统概述 •采用主流成熟技术&#xff0c;软件结构简洁、代码规范易阅读&#xff0c;SaaS 应用&#xff0c;全浏览器访问前后端分离&#xff0c;多服务协同&#xff0c;服务可拆分&#xff0c;功能易扩展&#xff1b; •支持多样化灵活配置&#xff0c;提取大量公共参数&am…

VisualStudio项目中多个同名文件处理

现象 在vs2019环境中&#xff0c;现在开发一个较大的C项目&#xff0c;它的源文件在多个文件夹中组织(在文件系统上)。在其中两个文件夹中&#xff0c;有几个同名的文件。如&#xff1a; .\ConsoleApplication1\JAMGEN_CONFIG_x4_test\firls.c .\ConsoleApplication1\NoiseCo…

网工内推 | 技术支持、解决方案工程师,RHCA认证优先,带薪年假

01 天融信 招聘岗位&#xff1a;售后技术支持工程师 职责描述&#xff1a; 1.负责公司运营商态势安全项目系统远程维护与运营支持工作。 2.负责远程对态势平台、数据探针进行日常巡检&#xff0c;及时发现故障问题&#xff0c;并反馈处置。 3.负责远程支撑态势平台的功能考核&…

TwIST算法MALTLAB主程序详解

TwIST算法MALTLAB主程序详解 关于TwIST算法的具体原理可以参考&#xff1a; 链接: https://ieeexplore.ieee.org/abstract/document/4358846 链接: https://blog.csdn.net/jbb0523/article/details/52193209 该算法的MATLAB源代码&#xff1a; 链接: http://www.lx.it.pt/~bi…

C++ DAY1 作业

1.定义自己的命名空间myspace&#xff0c;并在myspace中定义一个字符串&#xff0c;并实现求字符串长度 #include <iostream>using namespace std; namespace myspace {string str;int length_fun(){getline(cin,str);int i 0;while(str[i] ! \0){i;}return i;}} using…

How to Clean Text for Machine Learning with Python

NLP 在本教程中&#xff0c;您将了解如何清理和准备文本&#xff0c;以便使用机器学习进行建模。 完成本教程后&#xff0c;您将了解&#xff1a; 如何通过开发自己的非常简单的文本清理工具开始。 如何更上一层楼并使用 NLTK 库中更复杂的方法。 在使用现代文本表示方法&am…