<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span @click="coml('coma')">111111</span>
<span @click="coml('comb')">2222</span>
<span @click="coml('comc')">333333</span>
<component :is="currentcom"></component>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data:{
currentcom:'coma'
},
methods:{
coml:function(e){
this.currentcom=e
}
},
components:{
coma:{
template:"<h1>11111</h1>"
},
comb: {
template: "<h1>222221</h1>"
},
comc:{
template: "<h1>33333331</h1>"
}
}
})
</script>
</html>
Vue.js 动态组件使用
于 2020-12-02 17:47:20 首次发布