html+vue.js 生成二维码

在HTML文件中引入qrcode.min.js和Vue.js库：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

在Vue实例中定义data和methods选项，并在mounted钩子函数中使用qrcode.js库生成二维码：

<div id="app">
  <input v-model="text" placeholder="输入要生成二维码的内容" />
  <br />
  <div ref="qrcode"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    generateQRCode() {
      new QRCode(this.$refs.qrcode, {
        text: this.text,
        width: 200,
        height: 200,
      });
    }
  },
  mounted() {
    this.generateQRCode();
  }
});
</script>

在上述代码中，我们在Vue实例中定义了data选项，其中包括一个text属性，这个属性用来绑定input框中的输入的值。然后我们定义了generateQRCode方法，这个方法中使用了qrcode.js库生成了一个二维码，并将其显示在了指定的DOM元素中。最后，我们在页面加载完成后，在mounted钩子函数中调用了generateQRCode方法，这样就可以生成并显示二维码了。