参考: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. About Gnu Linker1

    1 OverView ld combines a number of object and archive files, relocates their data and ties up symbol ...

  2. 数据库-Oracle的使用

    数据库的作用不言而喻,Oracle 作为一个主流的数据库,了解更是需要的 安装好oracle之后,登录初始账号,一般而言呢,我就新建一个用户, --创建新用户,用户名为JohnWu ,密码为 root ...

  3. Python课程第二天作业

     一.统计字符串格式 要求: # 1.统计元组中所有数据属于字符串的个数,提示: isinstance() # 数据: t1 = (1, 2, '3', '4', 5, '6') # 结果: 3 代码 ...

  4. vue双向绑定的简单实现(原创)

    简单模拟一下vue的双向绑定实现,代码比较粗糙,菜鸟一枚,欢迎各位大佬斧正 1.实验环境: 利用a.b两个input,a代表页面中的数据,b代表data中的数据 2.原理: 利用Object.defi ...

  5. Python全栈开发记录_第九篇(面向对象(类)的学习)

    有点时间没更新博客了,今天就开始学习类了,今天主要是面向对象(类),我们知道面向对象的三大特性,那就是封装,继承和多态.内容参考该博客https://www.cnblogs.com/wupeiqi/p ...

  6. JAVA正则表达式匹配,替换,查找,切割(转)

    import java.util.ArrayList; import java.util.regex.Matcher; import java.util.regex.Pattern; public c ...

  7. hyper-v下的ubuntu虚拟机分辨率修改

    修改/etc/default/grub sudo vim /etc/default/grub 改变前: GRUB_CMDLINE_LINUX_DEFAULT="quiet splash&qu ...

  8. 根据URL地址获取对应的HTML,根据对应的URL下载图片

    核心代码(获取HTML): #region 根据URL地址获取信息GET public static String GetResult(string url) { return GetResult(u ...

  9. vue项目中如何使用多语言(vue-i18n)

    因项目需要,需要使用多语言,特此记录使用方法. 第一步:安装vue-i18n npm install vue-i18n 第二步:在生成的i18n文件夹中的index.js里引入vue-i18n 第三步 ...

  10. zabbix解决监控图中出现中文乱码问题

    首先确定zabbix开启了中文支持功能:登录到zabbix服务器的数据目录下(前面部署的zabbix数据目录是/data/www/zabbix),打开 locales.inc.php文件[root@Z ...