與后端生成二維碼相比，前端生成二維碼更具有靈活性，下面就介紹兩種前端生成二維碼的方式，兩種方式相比之下，vue-qr比qrcode多了一個(gè)再中間添加logo的功能。

npm install --save qrcodejs2 import

import QRCode from ’qrcodejs2’ 使用

<div ref='qrCodeUrl'></div> <script>methods: { creatQrCode() {var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: ’xxxx’, // 需要轉(zhuǎn)換為二維碼的內(nèi)容 width: 100, height: 100, colorDark: ’#000000’, colorLight: ’#ffffff’, correctLevel: QRCode.CorrectLevel.H}) },},mounted() { this.creatQrCode();},</script> 樣式（這里再提供一個(gè)給二維碼添加邊框的小技巧：如下圖所示，我們生成的二維碼是沒(méi)有邊框的，看起來(lái)不是很好看）　

就有了下面的效果：

npm install vue-qr --save import

import vueQr from ’vue-qr’ 使用

// logoSrc為logo的url地址(使用require的方式)；text為需要轉(zhuǎn)換為二維碼的內(nèi)容<vue-qr :logoSrc='imageUrl' text='xxx' :size='200'></vue-qr> <script> export default {name: 'qecode',data() { return {imageUrl: require('../assets/logo.png'), }},components: { vueQr}, },}</script>

以上就是Vue——前端生成二維碼的示例的詳細(xì)內(nèi)容，更多關(guān)于vue 前端生成二維碼的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！