您当前的位置：学无止境 > vue动态组件的简单使用网站首页学无止境
vue动态组件的简单使用
发布时间：2022-12-14 17:08:14编辑：三青查看次数：204
vue动态组件的简单使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<span @click="changeCom('coma')">标签a | </span>
<span @click="changeCom('comb')">标签b | </span>
<span @click="changeCom('comc')">标签c</span>
<br/>
<component :is="currentCom"></component>
</div>
<script>
var com_a = {
template:`this is com a`
}
var com_b = {
template:`this is com bb`
}
var com_c = {
template:`this is com ccc`
}
const App = {
data() {
return {
currentCom:'coma'
}
},
components: {
'coma':com_a,
'comb':com_b,
'comc':com_c
},
methods: {
changeCom(tag){
this.currentCom = tag
}
}
};
Vue.createApp(App).mount('#app');
</script>
</body>
</html>关键字词：component,vue,组件
评论：
