首先安装一下相关的插件 qrcode2

npm install --save qrcodejs2

　然后在需要画二维码的页面引入一下

import QRCode from 'qrcode2'

最后在methos里面定义一个方法去调用一下就行了

在对应的vue文件里定义一个二维码的容器

  <div id="qrcode" ref="qrcode"></div>

这样就大功告成了。

效果图如下

vue 画二维码的更多相关文章

  1. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  2. VUE 生成二维码(qrcodejs)

    1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...

  3. vue生成二维码插件qrcodejs2

    1.页面 <div id="qrCode" ref="qrCodeDiv"></div> 2.导入插件 import QRCode fr ...

  4. js通过codeURL画二维码

    一.函数封装 //生成微信二维码 function xyqrcode(options) { var settings = { dom:'', render: 'canvas', //生成二维码的格式还 ...

  5. VUE 生成二维码插件

    原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...

  6. vue条形码+二维码

    <template> <section style="height: 100vh;" class="bg"> <div class ...

  7. vue 生成 二维码 qrCode 插件 使用 方法

    首先安装方法:(--save 参数会改变package.json 推荐使用 下次直接install就行了) npm install --save qrcode 然后项目使用: import QRCod ...

  8. vue 生成二维码+截图

    链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...

  9. vue 微信二维码扫码登录，附加 自定义样式

    大概流程:   先安装 微信 的登录, 然后 局部引入,局部注册,方法调用,存 token,跳转路由 npm 安装 npm install vue-wxlogin --save-dev 微信安装 微信 ...

随机推荐

  1. phpstorm最新破解办法（2016-10-30）

    还是选择license server.然后复制http://jetbrains.tencent.click/ 这个地址进去就可以啦.不行的时候欢迎留言告知,更新破解方法

  2. How to Compare Means (均值比较)

    在比较数据的均值时,我们可能知道: 比较工厂当天生产的零件的长度是否合格 (length >= N mm),用 t-Test; 比较各一线城市的人均收入,用 ANOVA. 其实均值比较还有很多检 ...

  3. 安装MySQL需要注意的事项

    一.安装MySQL之后,怎样启动MySQL,以及登录.查看数据库操作? 用管理员身份运行cmd或power shell 二.当然有可能会出现不能在cmd或power shell中登录数据库账户 造成这 ...

  4. Luogu P2920 时间管理【二分答案】

    二分答案水题. (像我这么蒻的人都能十几分钟A掉) https://www.luogu.org/problemnew/show/P2920 开始时间一定在从0到min(t[i]-s[i])的一段区间上 ...

  5. _bzoj1003 [ZJOI2006]物流运输【预处理】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1003 预处理出第i天到第j天走一条航线时的最短路. #include <cstdio& ...

  6. 题解报告：hdu 1236 排名

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1236 Problem Description 今天的上机考试虽然有实时的Ranklist,但上面的排名 ...

  7. Maven环境搭建操作记录

    Maven官方网站: http://maven.apache.org/index.html Maven下载地址: http://maven.apache.org/download.cgi Maven历 ...

  8. 189 Rotate Array 旋转数组

    将包含 n 个元素的数组向右旋转 k 步.例如,如果  n = 7 ,  k = 3,给定数组  [1,2,3,4,5,6,7]  ,向右旋转后的结果为 [5,6,7,1,2,3,4].注意:尽可能找 ...

  9. Snort里如何将读取的包记录存到二进制tcpdump文件下（图文详解）

    不多说,直接上干货! 如果网络速度很快,或者想使日志更加紧凑以便以后的分析,那么应该使用二进制的日志文件格式.如tcpdump格式或者pcap格式.  这里,我们不需指定本地网络了,因为所以的东西都被 ...

  10. Oracle中的表空间

    表空间是什么? Oracle数据库包含逻辑结构和物理结构. 数据库的物理结构是指构成数据库的一组操作系统文件. 数据库的逻辑结构是指描述数据组织方式的一组逻辑概念及它们之间的关系. 表空间是数据库数据 ...