• 技术文章 >web前端 >js教程

    vue中key的重要作用是什么

    VV2021-05-03 16:55:47转载199

    一、使用key管理可复用的元素

    1、相关示例如下所示:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-if-key</title>
        </head>
        <body>
            <div id="app">
                <template v-if="Input === 'username'">
                    <label>用户名:</label>
                    <input placeholder="请输入你的用户名">
                </template>
                <template v-else>
                    <label>邮箱:</label>
                    <input placeholder="请输入你的邮箱">
                </template>
                <button v-on:click="changeInput">切换</button>
            </div>
            <script src="../../plugings/vue.js"></script>
            <script>
                var vm = new Vue({
                    el: "#app",
                    data: {
                        Input: "username",
                    },
                    methods: {
                        changeInput() {
                            if(this.Input === 'username') {
                                this.Input = 'email';
                            } else {
                                this.Input = 'username';
                            }
                        }
                    }
                })
            </script>
        </body>
    </html>

    2、当输入用户名阶段,输入相关的内容后相关结果如下所示:

    5f12c08dac51e1b0053d787798adae7.png

    3、当点击切换按钮后,其相关的结果为:

    99eb8ad7f7acfbb6deb2f7522d36fd2.png

    4、由以上的结果可以观察到其在用户名中输入的内容,当进行相关的切换后在邮箱的相关输入框中进行了相关的显示。

    5、出现上述情况的原因:

    (免费学习视频分享:javascript视频教程

    6、解决方式

    为input元素添加具有一个唯一值的key属性,来告诉Vue这两个元素是完全独立的,不要复用它们。

    修改后其相关的代码为:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-if-key</title>
        </head>
        <body>
            <div id="app">
                <template v-if="Input === 'username'">
                    <label>用户名:</label>
                    <input placeholder="请输入你的用户名" key="username">
                </template>
                <template v-else>
                    <label>邮箱:</label>
                    <input placeholder="请输入你的邮箱" key="email">
                </template>
                <button v-on:click="changeInput">切换</button>
            </div>
            <script src="../../plugings/vue.js"></script>
            <script>
                var vm = new Vue({
                    el: "#app",
                    data: {
                        Input: "username",
                    },
                    methods: {
                        changeInput() {
                            if(this.Input === 'username') {
                                this.Input = 'email';
                            } else {
                                this.Input = 'username';
                            }
                        }
                    }
                })
            </script>
        </body>
    </html>

    关键代码如下所示:

    11003e19acd72ad5944378821f9bead.png

    二、重用和重新排序现有元素

    1、相关的示例代码如下所示:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-for-key</title>
        </head>
        <body>
            <div id="app">
                <p>
                    ID:<input type="text" v-model="bookId">
                    书名:<input type="text" v-model="bookName">
                    <input type="button" @click="add" value="增加">
                </p>
                <p v-for="item in items">
                    <input type="checkbox">
                    <span>ID:{{item.id}}, 书名:{{item.name}}</span>
                </p>
            </div>
            <script src="../../plugings/vue.js"></script>
            <script>
                var vm = new Vue({
                    el: "#app",
                    data: {
                        bookId: '',
                        bookName: '',
                        items: [
                            {id: 1, name: "1"},
                            {id: 2, name: "2"}
                        ]
                    },
                    methods: {
                        add() {
                            this.items.unshift({
                                id: this.bookId,
                                name: this.bookName
                            })
                            this.bookId = '';
                            this.bookName = '';
                        }
                    }
                })
            </script>
        </body>
    </html>

    2、相关的运行结果说明

    开始时选中ID为1的序列

    7c3bd709e130f1f1cae36b32510c444.png

    新增书的相关信息后,所选中的序列变成ID为3的序列

    ecaa9af61ef06ae581564bcd19e4929.png

    3、产生如上所示的原因

    当Vue正在更新使用v-for渲染的元素列表时,它默认使用“就地更新”策略。如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。

    4、解决办法

    为列表的每一项提供一个唯一的key属性。

    849c22254b9931bc0a2b2d809eb9c04.png

    最后正确的运行结果如下所示:

    59d5c36ffb12a993c5bace6b3780c9b.png

    原理:为列表中的每一项提供一个唯一的key属性,可以给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素。

    注意:key属性的类型只能是string或者number类型。

    相关推荐:js教程

    以上就是vue中key的重要作用是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:vue key
    上一篇:javascript中的对象分为哪几类 下一篇:详解Angular中的模板输入变量(let-变量)
    VIP会员

    相关文章推荐

    • 每天一个JS 小demo之树菜单。主要知识点:DOM方法综合运用,递归运用• [翻译]怎么写一个React组件库(二)• pms前端结构• jQuery效果 - 简单的手风琴效果• 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点:事件

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网