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

  1. npm install --save qrcodejs2

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

  1. import QRCode from 'qrcode2'

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

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

  1.   <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. npm i macaca-android -g 无法安装成功、安装成功后运行脚本提示app-debug.apk不存在的问题

    转自https://testerhome.com/topics/8618Android 近期,macaca团队升级了macaca-android2.0.2和app-inspector1.2.28 ,导 ...

  2. Phpspy 2011继续身份验证绕过漏洞

    Author: Tm3yShell7 官方目前下载已经修补上了 目前官方下载是2011.php, 文件名为2011ok.php的是带洞版本. 今天m0r5和我说phpspy2011 我都不知道2011 ...

  3. Codeforces Round #409(Div.2)

    传送门 题意 A.询问最多改变一个字符的字符串"VK"子串数量 B.f(x,z)=y,给出x,y,求z For example, f("ab", "b ...

  4. Math对象常用方法（取整细节）

    Math 对象 Math 对象用于执行数学任务. 1.常用属性: 1.E :返回算术常量e,即自然对数的底数(约2.718) 2.PI :返回圆周率,约3.14159 2.常用方法    Math.方 ...

  5. element中upload单图片转base64后添加进数组,请求接口

    //先上代码 <template> <!-- data绑定的参数 getuploadloge: [ { url: '', name: '' } ], --> <!-- 编 ...

  6. Light oj 1002 Country Roads (Dijkstra)

    题目连接: http://www.lightoj.com/volume_showproblem.php?problem=1002 题目描述: 有n个城市,从0到n-1开始编号,n个城市之间有m条边,中 ...

  7. 题解报告：poj 3061 Subsequence（前缀+二分or尺取法）

    Description A sequence of N positive integers (10 < N < 100 000), each of them less than or eq ...

  8. ORA-14074: partition bound must collate higher than that of the last partition

    There is a error happen in crotab: CREATE parttion report ORA-14074:ORA-14074: partition bound must ...

  9. maven 工程导入jar包

    Maven项目引入jar包的方法,希望能帮助有需要的朋友们 法一.手动导入:项目右键—>Build Path—>Configure Build Path—>选中Libraries—& ...

  10. android开发学习——关于activity 和 fragment在toolbar上设置menu菜单

    在做一个项目,用的是Android Studio 系统的抽屉源码,但是随着页面的跳转,toolbar的title需要改变,toolbar上的menu菜单也需要改变,在网上找了好久,也尝试了很多,推荐给 ...