参考:https://blog.csdn.net/zhuswy/article/details/80267748

1.安装qrcode.js

npm install qrcodejs2 --save

2.页面中引入

import QRCode from 'qrcodejs2'

3.页面使用

<div id="qrcode" ref="qrcode"></div>
methods:{
qrcode () {
let qrcode = new QRCode('qrcode', {
width: 232, // 设置宽度
height: 232, // 设置高度
text: 'https://baidu.com'
})
}
}
/*
@ 在需要调用的地方 这样必须这样调用 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null
*/
this.$nextTick (function () {
this.qrcode();
})

更简单直接的方法:

src = "http://qr.topscan.com/api.php?bg=ffffff&fg=000000&text=" + code;  //code为券码

vue 使用QRcode生成二维码或在线生成二维码的更多相关文章

  1. 在线生成二维码的API接口

    现在很多大网站都有这样的一个功能,使用手机扫描一下网页上的二维码便可快速在手机上访问网站.想要实现这样的功能其实很简单,下面麦布分享几个在线生成网址二维码的API接口.都是采用http协议接口,无需下 ...

  2. 推荐六个在线生成网址二维码的API接口

    现在很多大网站都有这样的一个功能,使用手机扫描一下网页上的二维码便可快速在手机上访问网站.想要实现这样的功能其实很简单,下面麦布分享几个在线生成网址二维码的API接口.都是采用http协议接口,无需下 ...

  3. C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码

    本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...

  4. 【转】C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码

    本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...

  5. QrCode C#生成二维码 及JavaScript生成二维码

    一 C#的二维码    示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...

  6. QRCode二维码生成方案及其在带LOGO型二维码中的应用(1)

    原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1) 提要:很多公司为商业宣传之需,常将企业LOGO加入二维码中,但如果LOGO遮挡区域足够地大,二维码就变得无法识别.那么,有没有一 ...

  7. QRCode二维码生成方案及其在带LOGO型二维码中的应用(2)

    原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 续前:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1)  http://blog.csdn.net/johnsu ...

  8. vue 把后端返回的图片和url链接生成的二维码用canvas 合成一张图片

    H5 页面在做某个活动的时候,有两种分享方式,一种是链接分享,一种是图片分享. 链接分享的话,如果是在微信里,就可引导用户利用微信浏览器自带的分享,根据sdk设置分享标题简介链接缩略图即可. 图片分享 ...

  9. jquery.qrcode.js生成二维码(前端生成二维码)

    官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...

随机推荐

  1. day10 nfs服务,nginx负载均衡,定时任务

    ==================nginx 负载均衡==================== 实现nginx负载均衡的效果,并运用nfs服务共享目录,使所有nginx服务拥有共同的http目录 n ...

  2. Ros node启动与关闭

    1. ros运行单位: Ros程序运行的单位是ros node. 2. ros 节点的启动: (1)初始化ros节点:通过调用ros::init()接口实现:可以通过参数指定默认节点名字,之所以是默认 ...

  3. csp-s模拟测试85

    csp-s模拟测试85 $T1$全场秒切没有什么区分度,$T2$全场成功转化题意但是我并不会打,$T3$暴力都没打很遗憾. 100 00:21:49 02:56:35 02:56:49 135 02: ...

  4. myeclipse CTRL+1功能

    有时候,在myeclipse或者eclipse中自动编译代码有错误,我们把鼠标放在错误一行能够自动显示出问题原因,但是有时显示问题让人有些匪夷所思,不知所云何物. 此时可以使用<ctrl> ...

  5. System.Web.Mvc.HttpHeadAttribute.cs

    ylbtech-System.Web.Mvc.HttpHeadAttribute.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, ...

  6. 用pymysql实现的注册登录公告练习

    import pymysql #1.连接服务器 conn=pymysql.connect( host='127.0.0.1', port=3306, user='root', password='12 ...

  7. CSS 兼容性调试技巧

    CSS HACK 针对不同浏览器,书写不同的CSS代码的过程,称为“CSS HACK”. 也就是说:写一个CSS代码,让IE6识别,其它浏览器不识别. 下面,针对不同浏览器,有几个符号: 这些符号是在 ...

  8. ideal的maven项目不小心remove module,如何找回

    找回方式: ideal的最右侧有个maven projects 点开后点击“+”,也就是Add Maven Projects,寻找不小心remove modules 的 子项目的pom文件所在的位置, ...

  9. POJ 2398 map /// 判断点与直线的位置关系

    题目大意: poj2318改个输出 输出 a: b 即有a个玩具的格子有b个 可以先看下poj2318的报告 用map就很方便 #include <cstdio> #include < ...

  10. 使用CEfSharp之旅(5)CEFSharp 隔离Cookie

    原文:使用CEfSharp之旅(5)CEFSharp 隔离Cookie 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https:/ ...