法一：

1.全局引入jQuery/qrcode

npminstalljquery

npm install qrcode-npm

2.頁面引入jQuery/qrcode

import$from"jquery";

var QRCode = require('qrcode')

4.頁面代碼

<input id="text" type="text" value="http://www.runoob.com" /><br />
<div id="qrcode"></div>

3.掛載時寫入

mounted(){

QRCode.toDataURL('https://www.baidu.com')
  .then(url => {
   var qrbox = document.querySelector("#qrcode");
   const img = new Image();
   img.src=url;
   qrbox.appendChild(img);
  })
  .catch(err => {
    console.error(err)
  })

},

法二：

步驟：
1、安裝qrcodejs2插件，在控制臺輸入：

npm install qrcodejs2 --save
*注意：這里安裝的是qrcodejs2，不是qrcode，否則會報錯

2、頁面引入——在入口文件（默認是main.js）里引入：

import QRCode from 'qrcodejs2'
3、頁面展示
①：在對應的Html頁面中，添加html標簽

<div id="qrcode" ref="qrcode"></div>
②：配置，在methods方法里配置：

qrcode () {
let qrcode = new QRCode('qrcode',{
200, // 設置寬度，單位像素
height: 200, // 設置高度，單位像素
text: 'https://www.baidu.com' // 設置二維碼內容或跳轉地址
})
}
③：調用

this.$nextTick(() => {
this.qrcode()
})

如需清除上一次生成的(在data里定義：qrcode：null)：

　　makeQrcode (text) {
      if(this.qrcode){
        this.qrcode.clear();
        this.qrcode.makeCode(text);
      }else{
        this.qrcode = new QRCode('qrcode',{
           200, // 設置寬度，單位像素
          height: 200, // 設置高度，單位像素
          text  // 設置二維碼內容或跳轉地址
        })
      }
    },
    //打開查看
    handleCheck(val){
      this.popCheck={
        title:'掃碼查看',
        show:true,
        400,
        height:500
      }
      this.$nextTick(() => {
        this.makeQrcode('https://www.baidu.com');
      })
    },

　　

總結

以上是生活随笔為你收集整理的vue 让链接转化为二维码(两种方法)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。