参考: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. 关于python merge后数据行数增加的问题

    其中一个可能的原因是 join 的 data 里面的列不唯一,也就是要匹配的表里面有些一行数据对应了被匹配表多条数据,这样出来可能会增加行数,可以再查一下被匹配表里的数据是否去重

  2. 数据库MySQL--分组查询

    事例使用文件:https://files.cnblogs.com/files/Vera-y/myemployees.zip 分组数据:group by 子句 分组查询语法: select 分组函数,列 ...

  3. CF850E Random Elections

    题意:一共有n个人,要在三个人中选prefer,一开始他们心中都会想好他们的排名(共6种),之后给出的判断不会矛盾.规则如下:一共有三轮,分别是a->b,b->c,c->a,每个人选 ...

  4. Java怎样判断身份证号

    判断身份证号是否正确使用的是正则,Java与js中使用正则的方式大差不差,下面是Java通过正则判断身份证号是否正确的 * */ @Test public void cardId() { System ...

  5. ros多机系统

    编辑从机的~/.bashrc添加如下指令 方法一 export ROS_MASTER_URI=http://qian:11311 #qian是主机的机器名 export ROS_HOSTNAME=ro ...

  6. System.Convert.cs

    ylbtech-System.Convert.cs 1. 程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c56 ...

  7. python模块(转自Yuan先生)

    模块&包(****)                                                                模块(modue)的概念: 在计算机程序的开 ...

  8. SSH整合时执行hibernate查询报错:java.lang.ClassCastException: com.ch.hibernate.Depart

    今天在整合ssh三个框架时,有一个功能,是查询所有员工信息,且员工表和部门表是多对一的映射关系,代码能正常运行到查询得到一个List集合,但在页面展示的时候,就报异常了, java.lang.Clas ...

  9. HDU-1698-Just a Hook-区间更新+线段树成段更新

    In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of the heroes. T ...

  10. 安装MySQL出现的this application

    1,https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=1385 2,安装Windows 图像组件 (WIC)以及NET Fra ...