动态添加组件
2019-06-29 本文已影响0人
关耳木南
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
width:200px;
height:200px;
background-color: pink;
margin:50px auto;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<button v-if="flag" @click="add">添加</button>
<button v-else @click="del">删除</button>
<com1></com1>
<div v-show="mark">
<my></my>
</div>
</div>
<script type="text/javascript">
Vue.component('com1',{
template:'<div>{{msg}}</div>',
data(){
return {
msg:"kaskalksjd这里是全局组件"
}
}
})
new Vue({
el:"#app",
data:{
msg:"hhh",
mark:false,
flag:true
},
methods:{
add:function(){
this.mark = true;
this.flag = false;
},
del(){
this.mark = false;
this.flag = true;
}
},
components:{
'my':{
template:'<div class="box">局部组件</div>'
}
}
})
</script>
</body>
</html>
