使用Vue來實現qr code功能可以非常方便，Vue qrcode的使用方法也比較簡單。在這里，我們將討論如何使用Vue qrcode來生成qr code。
使用Vue qrcode插件的第一步是安裝它。您可以使用npm來安裝它，如下所示：標簽來生成qr code。v-bind:value用于指定qr code內容。v-bind:options用于指定qr code的選項。接下來，我們將解釋如何設置選項。
npm install vue-qrcode --saveimport Vue from 'vue'
import VueQrcode from 'vue-qrcode'
Vue.component(VueQrcode.name, VueQrcode)<template>
<div>
<vue-qrcode v-bind:value="qrcodeData" v-bind:options="qrcodeOptions"></vue-qrcode>
</div>
</template><script>
export default {
data () {
return {
qrcodeData: 'QR code data',
qrcodeOptions: {
margin: 2,
width: 200,
height: 200
}
}
}
}
</script><template>
<div>
<vue-qrcode v-bind:value="qrcodeData" v-bind:options="qrcodeOptions"></vue-qrcode>
</div>
</template>
<script>
import Vue from 'vue'
import VueQrcode from 'vue-qrcode'
Vue.component(VueQrcode.name, VueQrcode)
export default {
data () {
return {
qrcodeData: 'QR code data',
qrcodeOptions: {
margin: 2,
width: 200,
height: 200
}
}
}
}
</script>上一篇curl指定json數據
下一篇vue 深入理解