01-vue-切换按钮案例

案例要求：
用户登录有两种方式选择，实现点击按钮，切换登录方式
实现方式：
给两种输入方式添加是否显示，给按钮添加事件，点击一次改变显示与否
涵盖知识：
v-if、@click

 <div class='app'>
        <p v-if='isshown'>用户账号<input type="text" value='用户名'><button @click=toggle()>切换登录</button></p>
        <p v-if='isshowe'> 邮箱账号<input type="text" value='邮箱账号'><button @click=toggle()>切换登录</button></p>
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！',
                isshown: true,
                isshowe: false
            },
            methods: {
                toggle() {
                    this.isshowe = !this.isshowe
                    this.isshown = !this.isshown
                }
            }
        })
    </script>

更新，解决input复用情况，优化代码

问题：用户在输入数据，点击切换按钮时，前面input输入框的值会保留在切换之后，这是因为Vue在进行DOM渲染时，会尽可能复用相同的元素，而不是重新创建，解决方法，给对应的input添加一个key

  <div class='app'>
        <span v-if='isshow'>
            <label for="username">用户账号</label>
            <input type="text" id='username' placeholder="用户账号" key='username'>
        </span>
        <span v-else='isshow'>
            <label for="email"> 邮箱账号</label>
            <input type="text" id='email' placeholder='邮箱账号' key='email'>
        </span>

        <button @click='isshow=!isshow'>切换登录</button>
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                isshow: true
            }
        })
    </script>