qrcode 在vue里具体怎么使用

在Vue中使用QRCode有多种方式，以下是其中两种常见的方法：

1. 使用第三方QRCode库

安装QRCode库：

npm install qrcode --save

在Vue组件中引入QRCode库：

import QRCode from 'qrcode'

export default {
  data () {
    return {
      qrcodeUrl: ''
    }
  },
  methods: {
    generateQRCode () {
      QRCode.toDataURL('https://www.example.com', (err, url) => {
        if (err) {
          console.error(err)
        } else {
          this.qrcodeUrl = url
        }
      })
    }
  }
}

在Vue组件的模板中使用QRCode库生成的二维码图片：

<template>
  <div>
    <img :src="qrcodeUrl" alt="QRCode" />
    <button @click="generateQRCode">Generate QRCode</button>
  </div>
</template>

2. 使用Vue-QRCode组件

安装Vue-QRCode组件：

npm install vue-qrcode --save

在Vue组件中引入Vue-QRCode组件：

import VueQrCode from 'vue-qrcode'

export default {
  data () {
    return {
      qrcodeValue: 'https://www.example.com'
    }
  },
  components: {
    VueQrCode
  }
}

在Vue组件的模板中使用Vue-QRCode组件生成二维码图片：

<template>
  <div>
    <vue-qrcode :value="qrcodeValue" />
  </div>
</template>