参考:https://www.jianshu.com/p/d3883e020d99

步骤:

第一步:vue-cli下载插件

cnpm install --save qrcodejs2

第二步:组件中引入插件

<template>
<div>
<div id="qrcode"></div> <!-- 创建一个div,并设置id为qrcode -->
</div>
</template> <script>
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
name : 'test',
mounted () {
this.qrcode();
},
methods: {
qrcode() {
let qrcode = new QRCode('qrcode', {
width: 132,
height: 132,
text: 'https://www.baidu.com', // 二维码地址
})
},
}
}
</script>

vue使用qrcode插件生成二维码的更多相关文章

  1. Vue使用QRCode.js生成二维码

    1.安装qrcode npm install qrcode 2.组件中引入qrcode import QRCode from 'qrcode' 3.html代码 <div><span ...

  2. qrcode插件生成二维码

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  3. 利用QrCode.Net生成二维码 asp.net mvc c#

    利用QrCode.Net生成二维码 asp.net mvc c# 里面介绍了.net的方式及js的方式,还不错. 里面用到的qrcode.net的类库下载地址:https://qrcodenet.co ...

  4. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  5. qrcode.js生成二维码因字符串过长而报错

    前端使用qrcode.js生成二维码的时候.有时候是会出现 qrcode length overflow (1632>1056) 目前使用的有效的解决办法是重新下载新版的qrcode.js 下载 ...

  6. 转: jquery.qrcode.js生成二维码插件&转成图片格式

    原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...

  7. 【QRcode二维码】:使用JS前端插件QRcode.js生成二维码

    1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...

  8. nuxt使用QRCode.js 生成二维码

    QRCode.js 是一个用于生成二维码图片的插件, 官方文档 . 我是在nuxt.js(vue官方的服务端渲染方式)项目里使用的QRCode.js: 第一步:看官方文档: 第二步:下载QRCode. ...

  9. QRCode.js 生成二维码

    QRCode.js 是一个用于生成二维码图片的插件. github地址 在线实例 实例预览 基础示例 实例预览 API 接口 使用方法 载入 JavaScript 文件 <script src= ...

随机推荐

  1. WordPress版微信小程序安装使用说明

    昨天在群里,有刚刚使用WordPress版微信小程序朋友,在问安装过程中的问题,这些问题是经常被问到,这至少说明两个问题: 1.我开发的程序安装和使用不够简易,无法通过简单的配置就可以使用,特别是如果 ...

  2. 自定义panel实现,并实现item更改和移除动画。

    原地址:https://www.cnblogs.com/yk250/p/10043694.html  无图无真相: 1,重写panel类(模拟实现一个竖直方向排列的panel,相当于默认的StackP ...

  3. 关于c# Debug和Release的区别 (转)

    关于Debug和Release的区别之讨论本文主要包含如下内容: 1. Debug 和 Release 编译方式的本质区别2. 哪些情况下 Release 版会出错2. 怎样“调试” Release ...

  4. 如何创建数据库以及MySQL增删改查命令的简单运用

    在已经安装好MySQL的前提下 1.在Windows打开命令提示符窗口,输入命令启动MySQL命令行工具并登入root用户:mysql -h localhost -u root -p 2.输入密码后, ...

  5. win10下安装ubantu

    最近想看一点深度学习的东西,发现还是用linux更加方便一些.虽然,我对linux一窍不通....但是,目前很多教材,框架,都是基于linux.本来打算用虚拟机,后来发现虚拟机对于GPU的支持不好搞. ...

  6. redis hashmap数据结构分析

    说明一点:redis的hash中每一个key都是一个单独的hash表,field是hash表中的key,value是hash表中的value: //redis中hash数据结构为:key-field- ...

  7. Django请求生命周期

    生命周期: 指浏览器访问开始,经过Django都发生了什么 ? 1 首先客服端发送http请求,把请求体(请求头和请求内容)生成 2 服务器接收请求后,根据路由映射表一个一个匹配.匹配成功后,后面不匹 ...

  8. undefined symbol: PyFPE_jbuf

    参考: https://blog.csdn.net/ture_dream/article/details/52733326 报错确实是Python的版本不一致. 但是我又不想删除anaconda. 怎 ...

  9. Echart ,X轴显示的为tooltip内显示的一部分内容放在上面显示的一部分如下图所示

    如图所示:X轴只显示tooltip部分内容解决方案 在xAxis下面,实现方法如下 axisLabel: { interval: 0, formatter:function(value) { var ...

  10. 算法之Python实现 - 002 : 换钱的最少货币数补充(每种货币只能使用一次)

    [题目]:给定数组arr,arr中所有的值都为正数且不重复.每个值代表一种面值的货币,每种面值的货币仅可以使用一张,再给定一个整数aim代表要找的钱数,求组成aim的最少货币数. [代码1]:时间与额 ...