Vue中怎么實(shí)現(xiàn)列表渲染-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)Vue中怎么實(shí)現(xiàn)列表渲染，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

潛江ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="app">
    <div v-for="(item, myIndex) of list">
        {{item}}---{{myIndex}}
    </div>

    //一般來說，為了提高循環(huán)顯示的性能，我們會(huì)給每個(gè)循環(huán)項(xiàng)加上key值(像下面這樣加上:key="index"還是比較費(fèi)性能的。畢竟頻繁操作dom的時(shí)候還是會(huì)有些耗性能，可能讓vue沒法充分復(fù)用節(jié)點(diǎn)，所以不建議用index做為:key值)<br>
    <div v-for="(item, index) of list" :key="index">
        {{item}}---{{index}}
    </div>

    //那用什么？一般后端向前端返回?cái)?shù)據(jù)，會(huì)帶上id之類的唯一標(biāo)識(shí)符<br>
    <div v-for="(item, index) of listUnique" :key="item.id">
        {{item}}---{{index}}---{{item.id}}
    </div>

    <b >(怎樣讓性能最高呢？:key值要唯一，同時(shí)不能使用index作為它的值)</b><br>

    //如果不想讓最外面的div也顯示出來，可以將該div換成template：<br>
    <div v-for="(item, index) of listUnique" :key="item.id">
        <div>{{item}}---{{index}}---{{item.id}}</div>
        <span>{{item.id}}</span>
    </div>
    <template v-for="(item, index) of listUnique" :key="item.id">
        <div>{{item}}---{{index}}---{{item.id}}</div>
        <span>{{item.id}}</span>
    </template>

    //除了數(shù)組，對(duì)象也可以做循環(huán)：<br>
    <div v-for="(item, key, index) of userInfo">{{key}}:{{item}}, {{index}}</div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            list: ["hello", "world", "what", "the", "fuck"],
            listUnique: [
                {
                    id: "001",
                    text: "aaa"
                },
                {
                    id: "002",
                    text: "bbb"
                },
                {
                    id: "003",
                    text: "ccc"
                }
            ],
            userInfo: {
                name: "阿三",
                age: 18,
                gender: "male",
                salary: 100000
            }
        }
    })
</script>
</body>
</html>

這種方式加內(nèi)容會(huì)馬上渲染出來：
Vue中怎么實(shí)現(xiàn)列表渲染

而這樣卻不會(huì)渲染，但其實(shí)是加進(jìn)數(shù)組了的。這是為啥捏？使用vue修改數(shù)組內(nèi)容的時(shí)候不能用下標(biāo)的方式，只能通過vue提供的幾個(gè)數(shù)組變異方法來操作數(shù)組才能實(shí)現(xiàn)數(shù)組變化頁面也跟著變，一共有七個(gè)方法，分別是push、pop、shift、unshift、reserve、splice、sort：
Vue中怎么實(shí)現(xiàn)列表渲染

從下標(biāo)是1的數(shù)組開始處理，刪除1條，增加指定的一條：
Vue中怎么實(shí)現(xiàn)列表渲染

還可以通過引用的改變來實(shí)現(xiàn)(js的數(shù)組是引用類型)：
Vue中怎么實(shí)現(xiàn)列表渲染

改變數(shù)組的值(廢話，當(dāng)然是值變頁面也變)的另外兩個(gè)方法：
Vue中怎么實(shí)現(xiàn)列表渲染
(分別將下標(biāo)為(下標(biāo)從0開始)1的元素的值改為5，下標(biāo)為2的元素的值改為10)

改變對(duì)象可以用引用的方式：
Vue中怎么實(shí)現(xiàn)列表渲染

除了引用的方式改變對(duì)象的值(當(dāng)然，這篇說的全是數(shù)據(jù)變，頁面也變啊)，還可以用set方法：
Vue中怎么實(shí)現(xiàn)列表渲染

通過實(shí)例方法也可以：
Vue中怎么實(shí)現(xiàn)列表渲染

上述就是小編為大家分享的Vue中怎么實(shí)現(xiàn)列表渲染了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前名稱：Vue中怎么實(shí)現(xiàn)列表渲染-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://muchs.cn/article12/ddocgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、Google、響應(yīng)式網(wǎng)站、微信小程序、品牌網(wǎng)站制作、虛擬主機(jī)

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

猜你還喜歡下面的內(nèi)容