概述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../js/animate.css"/>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
p{
width:500px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="out">
<button @click="isshow='v-a'">组件AAA</button>
<button @click="isshow='v-b'">组件BBB</button>
<transition
enter-active-class="animated rollIn"
leave-active-class="animated rotateOutDownRight"
>
<component :is="isshow"></component>
</transition>
</div>
<template id="a">
<div>
<h1>组建AAAAA</h1>
</div>
</template>
<template id="b">
<div>
<h1>组建BBBBB</h1>
</div>
</template>
</body>
<script type="text/javascript">
var vm=new Vue({
el:'#out',
data:{
isshow:'v-a'
},
methods:{
},
components:{
'v-a':{
template:'#a'
},
'v-b':{
template:'#b'
}
}
})
// url地址栏路径 search(?id=ddd) hash(哈希 #aa) path(/ddd)
// 后端路由－－实现接口(不同路径下展示不同数据)
// 前端路由－－实现视图更换(不同路径下展示不同视图内容)
</script>
</html>
最后
以上就是时尚歌曲为你收集整理的vue点击切换组件的全部内容，希望文章能够帮你解决vue点击切换组件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复