主要部分
<transition>
<component :is='type'></component>
</transition>
<transition><component>都是vue.js暴露出来的组件可以直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app" >
<input type="text" value="" v-model="as" name="a">
<transition mode='out-in' name="fade">
<component :is="type"></component>
</transition>
<button @click="swtich()">切换</button>
</div>
<script>
var one = {
template:`<div>213</div>`
};
var two = {
template:`<div>213sss</div>`
};
Vue.component('Headers',Vue.extend(one ));
Vue.component('two',Vue.extend(two))
var vm = new Vue({
el:'#app',
data(){
return {
as:' ',
type:"two"
}
},
methods:{
swtich(){
this.type = this.type ==="one "? "two" : "one "
}
}
});
</script>
</body>
</html>
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
