<!--
动态组件 component is属性决定使用哪个组件
20190819
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id='app'>
<component :is='type'></component>
<!-- <c-one></c-one>
<c-two></c-two> -->
<button @click='handleClick'>click</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
Vue.component('c-one',{
template:'<div>c-one</div>'
});
Vue.component('c-two',{
template:'<div>c-two</div>'
});
var vm = new Vue({
el:'#app',
data:{
type :'c-one'
},
methods:{
handleClick :function(){
this.type = this.type==='c-one'?'c-two':'c-one'
}
}
})
</script>
</html>