参考: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. LeetCode【112. 路径总和】

    思路就是从根节点开始向下选节点,依次与sum比较大小,若小,则向下选左右节点其中一个,若大,则接下来判断是否是叶子节点,若是,则返回false 若不是,则上一步选另一节点,再将上述重新执行. 对于叶子 ...

  2. DataGridView导出数据到Excel

    //传入DataGridView /// <summary> /// 输出数据到Excel /// </summary> /// <param name="da ...

  3. c++字节对齐

    参考URL: http://blog.csdn.net/hairetz/article/details/4084088 0 字节对齐的意义按我的理解是便于cpu一次取完所有数据, 提高代码的执行效 1 ...

  4. linux最小化安装后的初始化

    Linux 最小化安装以后 linux会缺失很多功能,需要我们预先安装一些软件服务,例如mysql(mariadb),gcc等等. 但是最小化的mysql甚至不提供ifconfig,也没有wget命令 ...

  5. keil_v5生成.bin文件方法

    按ALT+F7,打开如下对话框 如上图,选择 After Build/ Rebuild下的Run#1,输入: C:/keil_v5/ARM/ARMCC/bin/fromelf.exe -bin -o ...

  6. unity检测鼠标是点击在UI上还是物体上

    void Update() { if (Input.GetMouseButtonDown(0)||(Input.touchCount >0 && Input.GetTouch(0 ...

  7. python之数据类型详解

    python之数据类型详解 二.列表list  (可以存储多个值)(列表内数字不需要加引号) sort s1=[','!'] # s1.sort() # print(s1) -->['!', ' ...

  8. 2018-2019-2 20175328李欣颖实验二《Java面向对象程序设计》实验报告

    2018-2019-2 20175328李欣颖实验二<Java面向对象程序设计>实验报告 面向对象程序设计-1 用程序解决问题时,要会写三种码: 1.伪代码 此处百分制转五分制: 如果成绩 ...

  9. http(数据格式)、postman(数组、id、断言) 小知识必看啊

  10. PLSQL安装教程,无需oracle客户端(解决本地需要安装oracle客户端的烦恼)

    最近用笔记本开发,项目用的是Oracle数据库,不想本地安装Oracle客户端. 就只装了一个PLSQL 连接数据库的时候各种错误,现在解决了记录一下. 详细内容见  附件