首先安装一下相关的插件 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. 杂项：IntelliJ IDEA

    ylbtech-杂项:IntelliJ IDEA 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http:/ ...

  2. Rails5终端基本命令

    更新: 2017/06/10 更新: 2017/06/21 增加迁移文件查看履历命令: rails db:migrate:status                           迁移文件生成 ...

  3. HDU1072:Nightmare

    传送门 题意 给出一张n*m的图 0.墙 1.可走之路 2.起始点 3.终点 4.时间重置点 问是否能到达终点 分析 我的训练专题第一题,一开始我设个vis数组记录,然后写炸,不能处理重置点根vis的 ...

  4. bzoj 1499: [NOI2005]瑰丽华尔兹【dp+单调队列】

    设f[a][i][j]为第a段时间结束时在(i,j)位置的最长滑行距离,转移很好想,就是分四个方向讨论,然后枚举这段时间的滑行长度取个max即可 但是这样是O(n^4)的,考虑优化 发现同一行或列,取 ...

  5. CentOS中设置Windows共享文件夹

    在CentOS中设置Samba可实现和Windows共享文件夹.常见的需求:1)用户能够在Windows机器上通过共享文件夹访问远程Linux服务器上自己的主目录:2)用户能够在Windows机器上访 ...

  6. OKEX websocket API 连接Python范例

    因为 websocket-client 新版的各种大脑降级设计 很多功能无法使用需要安装老版本websocket-client的包才能正常使用 pip3 install websocket-clien ...

  7. JS开发备忘笔记-- Javascript中document.execCommand()的用法

    document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令 ...

  8. 实现自己的ArrayList

    最近在学习数据结构和算法,书上有个ArrayList的简单实现,写的很不错. package cn.sp.test4; import java.util.Iterator; import java.u ...

  9. django 网站项目测试

    视图和 URL 配置: 在先前创建的 meishiweb目录下的 meishiweb 目录新建一个 view.py 文件,并输入代码: 此时在浏览器即可访问: 证明已经成功 我们也可以修改成以下的规则 ...

  10. 204 Count Primes 计数质数

    计算所有小于非负整数 n 的质数数量. 详见:https://leetcode.com/problems/count-primes/description/ Java实现: 埃拉托斯特尼筛法:从2开始 ...