(像上面這種加了style并不會(huì)實(shí)現(xiàn)漸變效果，因?yàn)関ue默認(rèn)是會(huì)盡量復(fù)用dom，想要vue不復(fù)用dom，要給其加上不同的key值)

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)尼金平免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

加上不同key值后，漸變效果有了：

????
????
????
????
????
????


????
????????
????????????hello
????????????bye
????????
????????切換
????
????
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????

如果想設(shè)置多個(gè)屬性之間的切換效果，可以用mode（mode="in-out"：先顯示要顯示的再隱藏要隱藏的。mode="out-in"：和前面的相反）：

????
????
????
????
????
????


????
????????
????????????hello
????????????bye
????????
????????切換
????
????
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????

組件動(dòng)畫(huà)也是可以的（不需要上面的不同值的key）：

????
????
????
????
????
????


????
????????
????????????hello
????????????bye
????????
????????切換
????
????
????????Vue.component("child1",?{
????????????template:?"
child1
"
????????});
????????Vue.component("child2",?{
????????????template:?"
child2
"
????????});
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????

動(dòng)態(tài)組件的實(shí)現(xiàn)方法：

????
????
????
????
????
????


????
????????
????????????//通過(guò)動(dòng)態(tài)組件的方式實(shí)現(xiàn)：
????????????
????????
????????切換
????
????
????????Vue.component("child1",?{
????????????template:?"
child1
"
????????});
????????Vue.component("child2",?{
????????????template:?"
child2
"
????????});
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????type:?"child1"
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.type?=?this.type?==?"child1"???"child2"?:?"child1"
????????????????}
????????????}
????????});
????