vue html 动态渲染组件几种方法（使用vue-qrcode 生成二维码）

最新推荐文章于 2025-11-28 10:43:17 发布

原创最新推荐文章于 2025-11-28 10:43:17 发布 · 4.5k 阅读

4 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了使用vue-qrcode库在Vue中动态渲染组件的三种方法：1) v-for循环，2) component动态组件，3) extend构造器。通过这些方法，可以方便地在应用中生成和展示二维码。

vue-qrcode ：https://github.com/fengyuanchen/vue-qrcode

1、v-for循环

2、component 动态组件

3、extend 构造器

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
		      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>二维码</title>
	</head>
	<body>
		<div id="app">
			<div ></div>
			<!--v-for循环-->
			 <qrcode :value="msg" v-for="(item,index) in items"></qrcode>
			 <div><button @click="add">二维码add</button></div>
			 <!--component动态组件-->
			 <component :is="item.com" v-for="(item,index) in items1" ></component>
			 <div><button @click="add1">二维码add1</button></div>
			 <!--extend   Vue 构造器-->
			 <div id="ddd"></div>
			 <div><button @click="add2">二维码add2</button></div>
			 <!--extend   Vue 构造器在js使用-->
			 <div id="ccc"></div>
			 <div><button onclick="javascript:add3()">二维码add3</button></div>
		</div>
		<button @click=""></button>
		<script src="./dist/vue.js"></script>
		<script src="./dist/vue-qrcode.min.js"></script>
		<script>
          
			var aa = {
					template: '<div><div><qrcode :value="msg"></qrcode></div></div>',
					data() {
							return {
									msg: "1113242342342"
							}
					},
					components:{
						'qrcode': window.VueQrcode
					},
			}
			
			function add3(){
				var bb = Vue.extend(aa);
				new bb().$mount("#ccc");
			}
			
			var app = new Vue({
				el: '#app',
				data:{
					msg:'1werwerwer',
					items:[{}],
					items1:[{com:aa}]
				},
				components:{
					'qrcode': window.VueQrcode
				},
				methods: {
					add(){
						this.items.push({});
					},
					add1() {
						this.items1.push({com:aa});
					},
					add2() {
						var bb = Vue.extend(aa);
						new bb().$mount("#ddd");
							//document.getElementById('').innerHTML='<qrcode :value="msg"></qrcode>';
					}
				}
			});

		</script>
	</body>
</html>