Vue内の複数の要素またはコンポーネントの遷移
5942 ワード
html>
<meta/>
<link/>
<script/>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
<style>
.myfade-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
</style>
<div>
<transition>
<div>hello</div>
<div>bye</div>
</transition>
<button> </button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
});
</script>
</code></pre>
<p>( style ， vue dom， vue dom， key )</p>
<p> key ， ：<br/></p>
<pre><code>html>
<title/>
<meta/>
<link/>
<script/>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
<style>
.myfade-enter, .myfade-leave-to {
opacity: 0;
}
.myfade-enter-active, .myfade-leave-active {
transition: opacity 1s;
}
</style>
<div>
<transition>
<div>hello</div>
<div>bye</div>
</transition>
<button> </button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
});
</script>
</code></pre>
<p> ， mode（mode="in-out"： 。mode="out-in"： ）：</p>
<pre><code>html>
<title/>
<meta/>
<link/>
<script/>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
<style>
.myfade-enter, .myfade-leave-to {
opacity: 0;
}
.myfade-enter-active, .myfade-leave-active {
transition: opacity 1s;
}
</style>
<div>
<transition>
<div>hello</div>
<div>bye</div>
</transition>
<button> </button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
});
</script>
</code></pre>
<p> （ key）：</p>
<pre><code>html>
<title/>
<meta/>
<link/>
<script/>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
<style>
.myfade-enter, .myfade-leave-to {
opacity: 0;
}
.myfade-enter-active, .myfade-leave-active {
transition: opacity 1s;
}
</style>
<div>
<transition>
<child1>hello</child1>
<child2>bye</child2>
</transition>
<button> </button>
</div>
<script>
Vue.component("child1", {
template: "<div>child1</div>"
});
Vue.component("child2", {
template: "<div>child2</div>"
});
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
});
</script>
</code></pre>
<p> ：</p>
<pre><code>html>
<title/>
<meta/>
<link/>
<script/>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
<style>
.myfade-enter, .myfade-leave-to {
opacity: 0;
}
.myfade-enter-active, .myfade-leave-active {
transition: opacity 1s;
}
</style>
<div>
<transition>
// ：
<component/>
</transition>
<button> </button>
</div>
<script>
Vue.component("child1", {
template: "<div>child1</div>"
});
Vue.component("child2", {
template: "<div>child2</div>"
});
var vm = new Vue({
el: "#root",
data: {
type: "child1"
},
methods: {
handleClick: function() {
this.type = this.type == "child1" ? "child2" : "child1"
}
}
});
</script>
</code></pre>
<p><br/></p>
</div>
</div>
</div>
</div>