参考: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. Elasticsearch.net一些开发笔记

    .net下开发es半年多了,留下些笔记 //https://www.elastic.co/guide/cn/elasticsearch/guide/current/combining-filters. ...

  2. PHP算法之转换成小写字母

    实现函数 ToLowerCase(),该函数接收一个字符串参数 str,并将该字符串中的大写字母转换成小写字母,之后返回新的字符串. 示例 1: 输入: "Hello"输出: &q ...

  3. Android欢迎页短暂白屏

    在style中application theme下添加以下代码: <item name="android:windowIsTranslucent" >true</ ...

  4. leetcode-216-组合总和③

    题目描述: 方法一:回溯 class Solution: def combinationSum3(self, k: int, n: int) -> List[List[int]]: res = ...

  5. 【luoguP4721】分治 FFT

    description 给定长度为\(n-1\)的数组\(g[1],g[2],..,g[n-1]\),求\(f[0],f[1],..,f[n-1]\),其中 \[f[i]=\sum_{j=1}^if[ ...

  6. MySQL架构和索引

    MySQL架构 逻辑架构图: 大概分为四层,这个见仁见义,有不同的分法: 第一层Connectors:处理不同语言与SQL的交互 第二层Connection Pool :连接池,管理缓存用户连接,线程 ...

  7. thinkphp 分布式数据库支持

    ThinkPHP内置了分布式数据库的支持,包括主从式数据库的读写分离,但是分布式数据库必须是相同的数据库类型. 配置DB_DEPLOY_TYPE 为1 可以采用分布式数据库支持.如果采用分布式数据库, ...

  8. PHP面向对象魔术方法之__clone函数

    l 基本介绍 : 当我们需要将一个对象完全的赋值一份, 保证两个对象的属性和属性值一样,但是他们的数据库空间独立,则可以使用对象克隆. <?php header('content-type:te ...

  9. jquery对于ajax的封装

    第一层封装 $.ajax({ 属性名:值,属性名:值}) /* url: 请求服务器地址 data:请求参数 dataType:服务器返回数据类型 error 请求出错执行的功能 success 请求 ...

  10. 王者归来,Java 程序设计葵花宝典!

    致谢  感谢所有关注本号的小伙伴们,这一年来本号的茁壮成长离不开大家的支持. 2018年,继续坚持分享以及为大家谋求福利!!! Java技术栈往期赠书 赠书一:新春第一次送书,价值78元 X 3本 赠 ...