要使用二维码,引入一个包就可以了,使用非常简单,话不多说,看代码吧

//1,引入,
import VueQrcode from '@xkeshi/vue-qrcode';
Vue.component(VueQrcode.name, VueQrcode);
//2,使用:
<div id="qrcode">二维码位置</div>
<qrcode v-if="code" :value="code" :options="{ size: 200 }"></qrcode> data(){
return:{
code:''
}
}
methods:{ setCode(){
setTimeout(()=>{
this.code='https://www.baidu.com'
},3000)
}
},
mounted(){
this.setCode()
}
这样子就OK了,是不是很简单

vue中使用vue-qrcode生成二维码的更多相关文章

  1. C# 利用QRCode生成二维码图片

    网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...

  2. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  3. C#Qrcode生成二维码支持中文,带图片,带文字

    C#Qrcode生成二维码支持中文带图片的操作请看二楼的帖子,当然开始需要下载一下C#Qrcode的源码 下载地址 : http://www.codeproject.com/Articles/2057 ...

  4. QRCode生成二维码,jq QRCode生成二维码,QRCode生成电子名片

    [QRCode官网]http://phpqrcode.sourceforge.net/ PHP QRCode生成二维码 官网下载QRCode源码包,引入源码包中的 qrlib.php . <?p ...

  5. Qrcode生成二维码的参数总结 及最小尺寸的测试

    Qrcode生成二维码,做过很多实验,探索最小规格的二维码到底是多少尺寸,和最高规格的二维码到底是多大尺寸.现在我总结总结: 有两种思路: 1.生成规格高的二维码,然后压缩到自己想要的尺寸的二维码.这 ...

  6. qrcode 生成二维码

    qrcode 生成二维码 Demo: https://www.hgnulb.cn/freedom/qrcode/qrcode.html qrcodeGithub 地址: https://github. ...

  7. python_使用qrcode生成二维码

    1.功能 使用qrcode生成二维码 2.代码 #生成二维码: import qrcode #根据url生成二维码 def qrcodeWithUrl(url): img = qrcode.make( ...

  8. 使用jquery.qrcode生成二维码实现微信分享功能

    前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...

  9. vue使用qrcode生成二维码,可以自定义大小

    1,qrcanvas-vue插件,https://gera2ld.github.io/qrcanvas-vue/#logo.只支持像素大小的二维码 2,qrcode支持移动端自定义大小二维码 &quo ...

  10. Vue前端利用qrcode生成二维码

    <div id="qrcode" style="width: 560px;height: 560px;background-color: white;"& ...

随机推荐

  1. 图论--Floyd总结

    Key word:     ①最短路     ②传递闭包:大小关系 数值关系 先后关系 联通关系     ③floyd变形     ④实现方式:插点发法     ⑤思想:动态规划 1.最短路: 最短路 ...

  2. 06 __init__ 和 __new__的关系和不同

    一. 双下new 和 双下init 关系 首先从__new__(cls,a,b,c)的参数说说起,__new__方法的第一个参数是这个类,而其余的参数会在调用成功后全部传递给__init__方法初始化 ...

  3. springboot设置banner

    下图是springboot项目启动的的打印数据,在log中可以清楚的看到有一个spring的banner图案,这个图案其实我们是可以自己进行设置的 我们在项目目录的resources目录下创建一个ba ...

  4. Scrapy模块使用出错,出现builtins.ImportError: DLL load failed: 找不到指定的程序

    问题描述:初次学习scrapy,使用scrapy官方文档创建爬虫项目出错, 出现builtins.ImportError: DLL load failed: 找不到指定的程序, ImportError ...

  5. MYSQL 日月周季年分组

    首先准备几条测试数据 DROP TABLE IF EXISTS `test`;CREATE TABLE `test` ( `n_id` int(11) DEFAULT NULL, `d_created ...

  6. 初探numpy

    安装numpy 通过python pip安装numpy pip install numpy numpy ndarray对象 创建ndarray对象只需调用numpy的array函数即可 numpy.a ...

  7. 云小课 | WAF反爬虫“三板斧”:轻松应对网站恶意爬虫

    描述:反爬虫是一个复杂的过程,针对爬虫常见的行为特征,WAF反爬虫三板斧——Robot检测(识别User-Agent).网站反爬虫(检查浏览器合法性)和CC攻击防护(限制访问频率)可以全方位帮您解决业 ...

  8. JS插件:fullCalendar图解

    1.首先看下效果: 官网下载链接 https://fullcalendar.io/download .官方效果图:https://fullcalendar.io/ 2.准备工作,引入对应的 css和 ...

  9. 缓冲 buffer 和缓存 cache 的区别

    缓存(cache)是在读取硬盘中的数据时,把最常用的数据保存在内存的缓存区中,再次读取该数据时,就不去硬盘中读取了,而在缓存中读取. 缓冲(buffer)是在向硬盘写入数据时,先把数据放入缓冲区,然后 ...

  10. 初识spring boot maven管理--HelloWorld

    配置文件配置好 了之后可以进行第一个例子的编写了! @Controller @EnableAutoConfiguration() public class SampleController { pri ...