<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div id="app"> {{message}} <button @click="showCode('all')">点我啊</button> <div id="insertCode"></div> </div> </body> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./jquery.min.js"></script> <script src="./qrcode.js"></script> <script src="./qrcode.min.js"></script> <script> </script> <script> var app = new Vue({ el: '#app', // str:'', data: { message: 'Hello Vue!', str:'', qrcode:'' }, methods: { showCode:function (item){ if (item == 'all') { this.geturl('https://try.fishqc.com') } }, //得到url geturl: function (url) { this.str = url; this.qrcode.makeCode(this.str); }, getGood:function () { this.qrcode=new QRCode(document.getElementById("insertCode"), { width: 120, height: 120 }); } }, mounted: function() { this.getGood() } }) </script> </html>
这里要注意的是必须要在mounted里面去调用,因为qrcodejs应该是操作dom的，所以需要dom树完全渲染出来才调用,见附件