首先安装一下相关的插件 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. IJ：目录

    ylbtech-IJ:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   7.返回顶部   8.返回顶部   9.返回顶部   10. ...

  2. word-break word-wrap

    work-break:break-all CJK超出的部分自动换行 word-wrap:break-word CJK如果有分隔符,当前分隔符之后与下一个分隔符之间的内容不能在这一行全部显示的话,在当前 ...

  3. C++中class在实例化前到底占用多少空间

    最近忽然想起一个问题,C++中class在实例化前到底占用多少空间?我隐约记得书上是这么说的“类在实例化时才分配空间”!但是当我写下这个小程序的时候,杯具产生了—— #include<iostr ...

  4. bzoj 3709: [PA2014]Bohater【贪心】

    先打能回血的,按消耗从小到大打: 然后按回血量降序打剩下的(把消耗和回血反着看就是上一种怪,打法一样): 中间体力小于0就输出无解 #include<iostream> #include& ...

  5. Android Studio编写运行测试纯java代码可带main()函数

    问题 小伙伴们在做安卓项目的时候,是不是有时候会忘记某些api的使用方法,不太确定他们的结果是怎样的,需要写一些测试代码,验证看看我们的写法是否正确.刚开始的时候我是在页面上写一个Button,添加点 ...

  6. java 继承还是组合

    1.我真的需要上溯转型(upcasting)吗? 如果是,才会用到继承. 2.

  7. django 第一个项目测试

    我们安装好Django以后就可以使用Django命令来创建项目了 1.Django 创建第一个项目 安装 Django 之后,您现在应该已经有了可用的管理工具 django-admin.py.我们可以 ...

  8. 题解报告：hdu 2087 剪花布条（KMP入门）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2087 Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面 ...

  9. android:fillViewport="true"让ScrollView内的view强行match_parent

    当你想让一个高度值不足scrollview的子控件fillparent的时候,单独的定义android:layout_height="fill_parent"是不起作用的,必须加上 ...

  10. unix shell 解析 1

    ---- shell 1 testdb3:/home/oracle [pprod] >more /home/oracle/utility/macro/tns_log_back_12c.sh #! ...