v-if登录账号切换小例子

最新推荐文章于 2023-10-31 09:18:55 发布

汤立

最新推荐文章于 2023-10-31 09:18:55 发布

阅读量285

点赞数

分类专栏： Vue杂项文章标签： vue

本文链接：https://blog.csdn.net/weixin_42867002/article/details/108165544

版权

Vue杂项专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue默认会复用已有元素，用key可以区分是否复用
label聚焦，点击label可以将焦点聚焦到for所对应的id

<div class="app"> 
        <span v-if="show">
            <label for="number">用户账号</label>
            <input id="number" placeholder="用户账号" key="number">
        </span>
        <span v-else>
            <label for="email">用户邮箱</label>
            <input id="email" placeholder="用户邮箱" key="email">
        </span>
        <button v-on:click="show=!show">切换账号</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:".app",
            data:{
                show:true
            }
        })
    </script>