<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中多个元素</title>
<script src="js/vue.js"></script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition mode="in-out">
<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">bye world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function () {
this.show=!this.show
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的过渡</title>
<script src="js/vue.js"></script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition mode="in-out">
<component :is="type"></component>
<!--<child v-if="show"></child>-->
<!--<child-one v-else></child-one>-->
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
new Vue({
el:'#app',
data:{
show:true,
type:'child'
},
methods:{
handleClick:function () {
// this.show=!this.show
this.type=this.type ==='child'?'child-one':'child'
}
}
})
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
