参考: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. 20175311 《Java程序设计》第三周学习总结

    20175311 2018-2019-2 <Java程序设计>第3周学习总结 教材学习内容总结 在蓝墨云中的教程里学习了如何安装IDEA,并且尝试了自己破解IDEA 主要在看书时,对jav ...

  2. listview-android:打造万能通用适配器(转)

    转载:https://blog.csdn.net/q649381130/article/details/51781921: 1.前言 listview作为安卓项目中一个的明星控件,它的适配器的写法是广 ...

  3. rxjava&retrofit请求直接返回string

    1.添加gradle依赖: compile com.squareup.retrofit2:converter-scalars:2.0.0' 2.更换转换器 mRetrofit = Retrofit.B ...

  4. 3阶马尔可夫链 自然语言处理python

    一.简介:       把每三个三个单词作为一个整体进行训练. 举一个例子: input:       my dream is that I can be an engineer, so I desi ...

  5. C# 文字滚动特效(上下滚动)

    本程序改编至网上下载的一个自定义控件,原控件是左右滚动效果,类似于跑马灯效果,由于项目需要,改编为上下滚动. 前期没有实现自动折行,今天刚加上自动折行. using System; using Sys ...

  6. java集合树状结构及源码

    java集合树状结构及源码 最近一直想看一下java集合的源码,毕竟平时用的比较多,但总是感觉是跟着习惯new出来一个对象,比如ArrayList,HashMap等等,所以就简单的看了一下,了解了一下 ...

  7. SUID、SGID详解

    文章转载至:http://tech.ccidnet.com/art/2583/20071030/1258885_1.html 如果你对SUID.SGID仍有迷惑可以好好参考一下! Copyright ...

  8. ubuntu 下安装mulval

    怎么在虚拟机下安装ubuntu这里就不多说了 ubuntu怎么安装静态ip可以参考:https://www.cnblogs.com/braveym/p/8640563.html ubuntu安装jdk ...

  9. Comparator与Comparable,自定义排序和类比较器,TreeSet对象排序

    /** * 学生类 * @author Administrator * */ public class Student { private String sno ; private String sn ...

  10. JavaScript数组方法--reduce、reduceRIght、reverse

    今天写的reduce是比较复杂的一个数组方法,其实在这之前我也用过reduce,可是每次用起来总感觉不那么顺手,主要还是因为不熟,对reduce本身不熟.首先reduce这个单词翻译为中文,不那么直观 ...