欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue中key的作用是什么

這篇文章將為大家詳細(xì)講解有關(guān)vue中key的作用是什么，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。

成都創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元三原做網(wǎng)站,已為上家服務(wù),為三原各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

一、使用key管理可復(fù)用的元素

1、相關(guān)示例如下所示：

<!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、當(dāng)輸入用戶名階段，輸入相關(guān)的內(nèi)容后相關(guān)結(jié)果如下所示：

vue中key的作用是什么

3、當(dāng)點(diǎn)擊切換按鈕后，其相關(guān)的結(jié)果為：

vue中key的作用是什么

4、由以上的結(jié)果可以觀察到其在用戶名中輸入的內(nèi)容，當(dāng)進(jìn)行相關(guān)的切換后在郵箱的相關(guān)輸入框中進(jìn)行了相關(guān)的顯示。

5、出現(xiàn)上述情況的原因：

  • 原理：在Vue中為了盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素，而不是從頭開始進(jìn)行渲染，這樣做可以使Vue渲染效率變得更高。

  • 示例分析：在上述示例中都使用了相同的<input>元素，Vue為了提高渲染效率，復(fù)用了<input>元素，因此在進(jìn)行相關(guān)的切換中input并未被替換掉，僅僅是替換了它的placeholder屬性。

（免費(fèi)學(xué)習(xí)視頻分享：javascript視頻教程）

6、解決方式

為input元素添加具有一個(gè)唯一值的key屬性，來告訴Vue這兩個(gè)元素是完全獨(dú)立的，不要復(fù)用它們。

修改后其相關(guān)的代碼為：

<!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>

關(guān)鍵代碼如下所示：

vue中key的作用是什么

二、重用和重新排序現(xiàn)有元素

1、相關(guān)的示例代碼如下所示：

<!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、相關(guān)的運(yùn)行結(jié)果說明

開始時(shí)選中ID為1的序列

vue中key的作用是什么

新增書的相關(guān)信息后，所選中的序列變成ID為3的序列

vue中key的作用是什么

3、產(chǎn)生如上所示的原因

當(dāng)Vue正在更新使用v-for渲染的元素列表時(shí)，它默認(rèn)使用“就地更新”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue將不會(huì)移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個(gè)元素，并且確保它們在每個(gè)索引位置正確渲染。

4、解決辦法

為列表的每一項(xiàng)提供一個(gè)唯一的key屬性。

vue中key的作用是什么

最后正確的運(yùn)行結(jié)果如下所示：

vue中key的作用是什么

原理：為列表中的每一項(xiàng)提供一個(gè)唯一的key屬性，可以給Vue一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素。

注意：key屬性的類型只能是string或者number類型。

關(guān)于vue中key的作用是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁題目：vue中key的作用是什么
URL網(wǎng)址：http://www.chinadenli.net/article20/pigdco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站維護(hù)、軟件開發(fā)、靜態(tài)網(wǎng)站、、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)