21.组件-动态数组---(vue入门 文档学习记录)

动态数组

1.动态数组顾名思义是指动态的绑定数组.具体使用如下:

<!--div -->
		<div id="app-9">
			<!--遍历tabls 定义按钮 click 按钮时触发 事件(将tab值赋值给 currentTab),这里是一个表达式-->
			<button v-for="tab in tabs" v-bind:key="tab" v-on:click="currentTab = tab"> {{ tab }} </button>
			<!--component 标签表明是组件 通过 v-bind:is ="组件名",动态绑定数组-->
			<component v-bind:is="currentComponent" ></component>
		</div>
	
		<script type="text/javascript">
			// 三个组件
			Vue.component("tab-home",{
				template:'<div>Home component</div>'
			})
			Vue.component("tab-post",{
				template:'<div>Post component</div>'
			})
			Vue.component("tab-archive",{
				template:'<div>Archive component</div>'
			})
			
			// vue 实例
			new Vue({
				el:'#app-9',
				data:{
					currentTab:'Home',
					tabs:['Home','Post','Archive']
				},
				computed:{
					currentComponent:function (){
						return 'tab-'+this.currentTab.toLowerCase()
					}
				}
			})

我们可以看到,定义了三个组件,通过 声明这是一个组件,通过v-bind:is="组件名"来绑定数组,通过计算属性计算出组件名,通过点击事件来改变currentTab,计算出不同的组件名,从而达到动态添加数组的目的