vue利用插件循环生成后端url链接生成二维码

来碗疙瘩汤

已于 2022-10-29 15:09:16 修改

阅读量667

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端 1024程序员节

于 2022-10-22 17:58:07 首次发布

本文链接：https://blog.csdn.net/weixin_62328829/article/details/127464980

版权

vue 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

本次循环生成二维码利用的插件时vue-qrcode

npm install vue-qrcode --save

效果图如下

二维码在弹窗中生成

根据后台返回的链接，生成对应二维码

<div v-for="(item,index) of checkinfo" :key="index"> //循环多个嵌套二维码的div
  <vue-qrcode :value="item.url"></vue-qrcode> //根据yrl循环生成二维码
  <div style="margin-left:16px;">这是第&nbsp;{{item.id}}&nbsp;个二维码</div>
</div>

其中checkinfo为后端返回的url数组，利用v-for循环生成单个的url链接

废话不多说上代码

<template>
  <div>
    <div v-for="(item,index) of checkinfo" :key="index">
      <vue-qrcode :value="item.url"></vue-qrcode>
      <div style="margin-left:16px;">这是第&nbsp;{{item.id}}&nbsp;个二维码</div>
    </div>
  </div>
</template>


<script>
import VueQrcode from 'vue-qrcode'

export default {
  data() {
    return {
      checkinfo: [
        { id: '01', url: "www.baidu.com" },
        { id: '02', url: "www.baidu.com" },
        { id: '03', url: "www.baidu.com" },
        { id: '04', url: "www.baidu.com" },
      ],
    };
  },
  components: { VueQrcode },
  mounted() {
  },
  methods: {
  }
}
</script>

ok了，简简单单