在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue中的v-if和v-show在某些場(chǎng)景下，v-show不生效的問(wèn)題？

vue中的v-if和v-show在某些場(chǎng)景下，v-show不生效的問(wèn)題？

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Vue中的動(dòng)畫(huà)封裝</title>
<link rel="stylesheet" href="./main.css">
<script src='./vue.js'></script>
<style>
    .v-enter,.v-leave-to{
        opacity:0
    }
    .v-enter-active,.v-leave-active{
        transition: opacity 2s ease .1s
    }
</style>

</head>
<body>

<h1>Vue中的動(dòng)畫(huà)封裝</h1>
<hr>
<div id="app">
    <fade :visible='visible'>
        <div>16個(gè)歐洲國(guó)家簽署首份《日內(nèi)瓦公約》</div>
    </fade>
    <button @click='handleClick'>切換狀態(tài)</button>
</div>
<script>
    Vue.component('fade',{
        props:['visible'],
        template:`
            <transition>
                <slot v-if='visible'></slot>
            </transition>
        `
    })
    var vm = new Vue({
        el:"#app",
        data:{
            visible:true,
        },
        methods:{
            handleClick(){
                console.log(55);
                this.visible=!this.visible
            }
        }

    })
</script>

</body>
</html>

代碼如上 ，在<slot v-if='visible'></slot>代碼中，slot插槽上定義v-show不生效，但是定義v-if卻生效了，這是什么原因啊，求各位大佬釋義，謝謝

回答
編輯回答
乞許

不好意思，沒(méi)仔細(xì)看文檔了，文檔指出了問(wèn)題所在了：v-show 不支持 <template> 元素，也不支持 v-else

2018年5月13日 08:36