vue3中生成二维码怎么展示

在Vue 3中生成二维码并展示可以通过使用第三方库`qrcode`来实现。下面是一个简单的示例代码：

首先，你需要安装`qrcode`库：

npm install qrcode

然后，在你的Vue组件中引入并使用`qrcode`库来生成二维码：

<template>
  <div>
    <img :src="qrcodeUrl" alt="QR Code">
  </div>
</template>

<script>
import QRCode from 'qrcode';

export default {
  data() {
    return {
      qrcodeUrl: ''
    };
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      const text = 'https://example.com'; // 要生成二维码的文本内容
      const options = {
        width: 200, // 二维码的宽度
        height: 200, // 二维码的高度
      };

      QRCode.toDataURL(text, options)
        .then(url => {
          this.qrcodeUrl = url; // 将生成的二维码URL赋值给qrcodeUrl变量
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

上述代码中，我们在`mounted`钩子函数中调用`generateQRCode`方法来生成二维码，并将生成的二维码URL赋值给`qrcodeUrl`变量。在模板中使用`<img>`标签来展示生成的二维码。

请注意，上述代码只是一个简单示例，你可以根据自己的需求进行调整和扩展。同时，你也可以使用其他的二维码生成库来实现相同的功能。