js 生成二维码

第一种,需要先下载包      npm install qrcode 

<template>
  <div>
    <h2>二维码</h2>
    <img :src="qrCodeImage" alt="">
  </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
  data () {
    return {
      qrCodeImage: ''
    }
  },
  created () {
    this.generateQRCode('https://element.eleme.cn/#/')
  },
  methods: {
    async generateQRCode (url) {
      const opts = { errorCorrectionLevel: 'H' }
      this.qrCodeImage = await QRCode.toDataURL(url, opts)
    }
  }
}
</script>

<style>
</style>

第二种不需要下载包,只需要改‘data=’后面的地址

<template>
  <div>
    <h2>二维码</h2>
    <img src='https://api.qrserver.com/v1/create-qr-code?data=https://element.eleme.cn/#/'>
  </div>
</template>


<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style>
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring:面向切面(AOP)

1. 代理模式 二十三种设计模式中的一种&#xff0c;属于结构型模式。它的作用就是通过提供一个代理类&#xff0c;让我们在调用目标方法的时候&#xff0c;不再是直接对目标方法进行调用&#xff0c;而是通过代理类**间接**调用。让不属于目标方法核心逻辑的代码从目标方法中剥…

Day23:Leetcode:530.二叉搜索树的最小绝对差 + 501.二叉搜索树中的众数 + 236. 二叉树的最近公共祖先

LeetCode&#xff1a;530.二叉搜索树的最小绝对差 问题描述 解决方案&#xff1a; 1.思路 中序遍历 2.代码实现 class Solution {int pre;int ans;public int getMinimumDifference(TreeNode root) {ans Integer.MAX_VALUE;pre -1;dfs(root);return ans;}public void d…

ic基础|时钟篇05:芯片中buffer到底是干嘛的?一文带你了解buffer的作用

大家好&#xff0c;我是数字小熊饼干&#xff0c;一个练习时长两年半的ic打工人。我在两年前通过自学跨行社招加入了IC行业。现在我打算将这两年的工作经验和当初面试时最常问的一些问题进行总结&#xff0c;并通过汇总成文章的形式进行输出&#xff0c;相信无论你是在职的还是…

MATLAB学习:频谱图的绘制

1.概述 时域信号经FFT变换后得到了频谱,在作图时还必须设置正确的频率刻度,这样才能从图中得到正确的结果。 2.案例分析 下面透过一个简单的例子来分析频谱图中频率刻度(横坐标)的设置的重要性。一余弦信号,信号频率为30Hz,采样频率100Hz,信号长128,在FFT后做谱图&#xff0…

【STM32单片机】----实现LED灯闪烁实战

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

1.6 什么是程序-编译与调试

目录 1 程序的作用 2 新建项目及编译运行 2.1 新建项目 2.2 HelloWorld 程序说明 2.3 printf 打印输出 2.4 注释 3 程序的编译过程及项目位置 4 断点及调试窗口设置 5 学习C语言后的境界 1 程序的作用 如下图所示&#xff0c;我们编写了一个可以做加法的程序&#xf…

【机器学习-23】关联规则(Apriori)算法:介绍、应用与实现

在现代数据分析中&#xff0c;经常需要从大规模数据集中挖掘有用的信息。关联规则挖掘是一种强大的技术&#xff0c;可以揭示数据中的隐藏关系和规律。本文将介绍如何使用Python进行关联规则挖掘&#xff0c;以帮助您发现数据中的有趣模式。 一、引言 1. 简要介绍关联规则学习…

Python编程之调试魔法与列表逆转之谜

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、调试魔法&#xff1a;揭开Python编程的神秘面纱 代码调试实例 二、列表逆转之谜&#…

图书管理系统——Java版

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaSE 顺序表的学习&#xff0c;点我 目录 图书管理系统菜单 基本框架&#xff1a; 书&#xff1a; 书架&#xff1a; 用户&#xff…

JavaEE初阶多线程 (5)

1.锁的策略 1.1锁的策略是什么 这个锁的策略可以理解为&#xff0c;一种做法&#xff0c;相当于当你遇到锁竞争&#xff0c;加锁解锁&#xff0c;的情况你会怎么做。 乐观锁可以理解为疫情的时候比较乐观就买了最基本的物资&#xff0c; 买的时候非常方便 1.2乐观锁 当效率…

web及网络基础图文详解

目录 1.1TCP/IP 协议族 1.2TCP/IP 的分层管理 1.3TCP/IP通信传输流 1.4 与 HTTP 关系密切的协议 : IP、TCP 和 DNS &#xff08;1&#xff09;负责传输的 IP协议&#xff08;网络层&#xff09; &#xff08;2&#xff09;确保可靠的 TCP协议&#xff08;传输层&#xff…

2024/5/26周报

文章目录 摘要Abstract文献阅读题目创新点方法网络架构LSTM 实验过程Data acquisitionData preprocessingAlgorithm parameter settingsModels evaluation 实验结果 深度学习ARIMA一、ARIMA模型的基本思想二、ARIMA模型的数学表达式三、差分过程 总结 摘要 本周阅读了一篇基于…

Aya 23 是 Cohere For AI 推出的一款最先进的新型多语言开放重量模型

相信一些对LLM关注较高的同学们&#xff0c;应该对这家加拿大的Cohere不会太陌生。毕竟此前&#xff0c;它就开源过 Aya 101 和 Command R 这两款大模型。 Cohere 的非营利性研究实验室 Cohere for AI 发布了 Aya 23&#xff0c;这是其多语言大型语言模型 &#xff08;llm&…

计算机毕业设计 | SpringBoot社区物业管理系统 小区管理(附源码)

1&#xff0c; 概述 1.1 课题背景 近几年来&#xff0c;随着物业相关的各种信息越来越多&#xff0c;比如报修维修、缴费、车位、访客等信息&#xff0c;对物业管理方面的需求越来越高&#xff0c;我们在工作中越来越多方面需要利用网页端管理系统来进行管理&#xff0c;我们…

就业班 第三阶段(ELK) 2401--5.20 day1 ELK 企业实战 ES+head+kibana+logstash部署(最大集群)

ELKkafkafilebeat企业内部日志分析系统 1、组件介绍 1、Elasticsearch&#xff1a; 是一个基于Lucene的搜索服务器。提供搜集、分析、存储数据三大功能。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java开发的&#xff…

力扣HOT100 - 287. 寻找重复数

解题思路&#xff1a; 快慢指针 第一步&#xff0c;慢指针每次移动一步&#xff0c;快指针每次移动两步&#xff0c;直到它们相遇。这一步保证了它们在环中相遇。 接下来&#xff0c;将其中一个指针&#xff08;快指针或慢指针&#xff09;重置到起点&#xff08;即数组的第一…

IP数据云确认参展2024 ChinaJoy BTOB与诸位共展未来!

作为在全球数字娱乐领域兼具知名度与影响力的年度盛会&#xff0c;2024年第二十一届ChinaJoy BTOB将于7月26日至7月28日在上海新国际博览中心盛大召开&#xff0c;秉承着初心“游”在&#xff0c;精彩无限&#xff01;&#xff08;英译&#xff1a;Stay True, Game On.&#xf…

数据库攻防之MySQL

MySQL 是最流行的关系型数据库&#xff0c;与此同时也是 web 应用中最好的关系型数据库管理应用软件。我们在渗透过程中碰到的 PHP 站点大部分都会搭配 MySQL 数据库&#xff0c;因此它是红队攻防中最常遇到的数据库。 0x01 MySQL简介 MySQL 是典型的关系型数据库&#xff0c;…

Gradle筑基——Gradle Maven仓库管理

基础概念&#xff1a; 1.POM pom:全名Project Object Model 项目对象模型&#xff0c;用来描述当前maven项目发布模块的基础信息 pom主要节点信息如下&#xff1a; 配置描述举例&#xff08;com.android.tools.build:gradle:4.1.1&#xff09;groupId组织 / 公司的名称com.…

Linux-之 简易:Shell编程

1 为什么要学习Shell编程 对于JavaEE和Python程序员来说,工作的需要,你的老大会要求你编写一些Shel脚本进行程序或者是服务器的维护,比如编写一个定时备份数据库的脚本. 对于大数据程序员来说,需要编写Shell程序来管理集群 2 Shell是什么 Shell是一个命令行解释器&#xff…