javascript - Vue2.0中过渡模式按钮的切换?

问题描述

问 题

想通过点击off和on来实现切换,不知道哪里错了,功能不行,还报错,都是按照官网的例子来写的啊??求解!!

解决方案

去看sources里的代码，别看elements里的。

<div id="app">
    <div id="no-mode-demo" class="demo">
        <transition name="no-mode-fade">
            <button v-if="on" key="on" @click="on = false">
          on
        </button>
            <button v-else="" key="off" @click="on = true">
          off
        </button>
        </transition>
    </div>
</div>
<script>
    new Vue({
        el: '#no-mode-demo',
        data: {
            on: false
        }
    })
</script>
<style>
    .no-mode-fade-enter-active,
    .no-mode-fade-leave-active {
        transition: opacity .5s
    }
    
    .no-mode-fade-enter,
    .no-mode-fade-leave-active {
        opacity: 0
    }
</style>

这篇关于javascript - Vue2.0中过渡模式按钮的切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！