js 生成二维码

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

javascript 复制代码
<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='后面的地址

javascript 复制代码
<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>
相关推荐
光影少年3 分钟前
React18 函数组件执行顺序、严格模式下重复执行问题
前端·javascript·react.js
之歆7 分钟前
DAY_20JavaScript 条件语句与循环结构深度学习(一)
前端·javascript
lihaozecq8 分钟前
从零实现一个 ReAct Agent Loop - 可中断、可流式、多模型支持
前端·agent·ai编程
金玉满堂@bj10 分钟前
Python 后端开发 从零到就业完整教程(2026 企业级完整版)
开发语言·python
冴羽yayujs13 分钟前
GitHub 前端热榜项目 - 日榜(2026-05-10)
前端·github
CAE虚拟与现实13 分钟前
前后端调试常用工具大全
前端·后端·vue·react·angular
iuu_star14 分钟前
跑通最简单的Vue3+Python前后端分离项目
前端·vue.js·python
AZaLEan__17 分钟前
CSS3:从 2D 变换到 3D 翻转
前端·3d·css3
qq_2698704317 分钟前
claude code 终端安装
开发语言
剑神一笑18 分钟前
Linux du 命令深度解析:从磁盘占用统计到目录空间分析
linux·运维·前端