vue key属性

最新推荐文章于 2025-06-19 17:32:27 发布

转载最新推荐文章于 2025-06-19 17:32:27 发布 · 344 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/649012

文章标签：

#javascript #ViewUI

<body>

    <div id="app">

        <select name="" id="" v-model="loginType">

            <option value="username">使用户名登录</option>

            <option value="email">使用邮箱登录</option>

        </select>

        <br>

        <!-- vue在重新渲染页面时，实现条件切换渲染页面时，会尽可能少的进行DOM删除和添加 ，尽可能的重用页面已有的元素，例如if和else中元素相同但属性不同时，在切换时只修改元素的属性，而不删除，添加新元素，这叫做vue的惰性-->

        <!-- 但是某些时候，惰性机制，可能会导致一些问题，页面中不想采用惰性渲染，则需要手动关闭惰性渲染。 -->

        <!-- vue元素中的元素可以添加key属性，用于标记这个元素的重用类型，只要key相同元素才可以重用 -->

        <input  v-if="loginType=='username'" type="text" name="username" placeholder="请输入用户名" key="username" v-model="username">

        <input  v-else type="text" name="email" placeholder="请输入邮箱" key="email" v-model="email">

    </div>

    <script src="vue.js"></script>

    <script>

    new Vue({

        el:"#app",

        data:{

            loginType:"username",

            username:"",

            email:"",
        }
    })

    </script>
</body>