参考: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. SQL链接EXCEL操作

    Sub CopyData_5() Set Cnn = CreateObject("ADODB.Connection")With Cnn.Provider = "micro ...

  2. [转]Nginx配置详解

    Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也可作为 ...

  3. Python自学:第五章 使用range( )创建数字列表

    # -*- coding: GBK -*- number = list(range(1,6)) print(number) 输出为: [1, 2, 3, 4, 5] 2. # -*- coding: ...

  4. 微信公众号支付出现:“当前页面的URL未注册”

    微信公众号H5调起支付时,点击支付按钮出现“当前页面的URL未注册”的提示.解决办法:由于2017年8月1日微信官方把关于支付的信息转移到了商户平台:公众平台微信支付公众号支付授权目录.扫码支付回调U ...

  5. Maven远程仓库地址修改(精)

    国内最快的maven镜像  阿里云maven镜像 <repositories> <repository> <id>spring-snapshots</id&g ...

  6. JS 常用的两个客户端输出方法

    document.write(str)   描述:在网页的<body>标记,输出str的内容.   document意思“文档”,就是整个网页了.   document是一个文档对象,代表 ...

  7. Pycharm中如何加载多个项目同时存在

    原文地址: http://www.cnblogs.com/mrgavin/p/6382406.html 今天在使用Pycharm工具练习Python时遇到一个疑问:在已存有项目A工程的前提下如何新建另 ...

  8. Python中%r和%s的详解及区别_python_脚本之家

    Python中%r和%s的详解及区别_python_脚本之家 https://www.jb51.net/article/108589.htm

  9. Day 8 : Python 文档操作

    Python 文件的操作方法: 打开文件 f = open('test','r',encoding='utf-8') #f :文件句柄 #test:文件绝对路径 #r:打开方式 #encoding 打 ...

  10. Object 和Throwable

    Object java.lang.Object 所有类的超类 Object里面有的方法所有的类都有 Object方法: String toString() 返回对象的字符串表现形式  类名 + @ + ...