vue中使用qrcodejs2替換二維碼內容

在 Vue.js 中，如果你想使用 qrcodejs2 这个库生成二维码并替换其内容，你可以按照以下步骤操作：

首先，你需要安装 qrcodejs2，可以通过 npm 或 yarn 完成：

npm install qrcodejs2 --save
# 或者
yarn add qrcodejs2

然后，在你的 Vue 组件中引入 qrcodejs2，并创建一个计算属性来生成二维码图片。例如：

<template>
  <div>
    <qrcode :value="qrCodeContent" class="qrcode"></qrcode>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  data() {
    return {
      qrCodeContent: '',
    };
  },
  computed: {
    qrcodeImage() {
      // 创建一个新的 QRCode 实例
      const qrcode = new QRCode(document.createElement('canvas'), {
        text: this.qrCodeContent,
        width: 200, // 自定义二维码大小
        height: 200,
      });
      
      // 返回 QRCode 生成的 canvas 作为 src 赋予 img 标签
      return qrcode.make().toDataURL();
    },
  },
};
</script>

<style scoped>
.qrcode {
  display: inline-block;
}
</style>

在这个例子中，当你在组件的 `data` 对象中更改 `qrCodeContent`，`qrcodeImage` 计算属性会重新计算，生成的新二维码会立即显示在页面上。