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,計算出不同的組件名,從而達到動態添加數組的目的