您當前的位置 :中國婁底網 >> 企業

Vue單頁面的動態組件

來源: 2020-03-29 11:35:50 閱讀:-
<template id="my-A">
<div>
<p >{{title}}</p>
</div>
</template>
<template id="my-B">
<div>
<p >B組件</p>
</div>
</template>
<template id="my-C">
<div>
<p >C組件</p>
</div>
</template>
<div id="app">
<!-- 動態組件 一-->
<button @click="flag= 'a'">a組件</button>
<button @click="flag= 'b'">b組件</button>
<my-a v-if="flag=='a'" :title=" 'aaaa組件' "></my-a>
<my-a v-if="flag=='b'" :title=" 'bbbb組件' "></my-a>
<hr>
<!-- 動態組件 二 判斷的是組件的名稱-->
<button @click="flag2= 'my-b'">b組件</button>
<button @click="flag2= 'my-c'">c組件</button>
<component :is="flag2"></component>
</div>

<script>
new Vue({
el:'#app',
data:{
flag:'a',
flag2:'my-b'
},
components:{ //組件
'my-a':{
template:'#my-A',
props:['title']
},
'my-b':{
template:'#my-B',
},
'my-c':{
template:'#my-C',
}
}
});
</script>

推薦閱讀:電腦有哪些品牌

山西扣点点麻将攻略 海康威视股票走势 辽宁十一选五走势手机版 幸运飞艇倾家荡产 双色球预测专区 pk10手机免费计划软件 吉林11选5开奖结果 广东十一选五模拟投注 上海十一选五遗漏 新疆时时彩11选5开奖 甘肃11遗漏号码查询任三