Vue中如何實現列表渲染

發布時間：2022-04-21 16:45:13 來源：億速云閱讀：307 作者：iii 欄目：大數據

這篇“Vue中如何實現列表渲染”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue中如何實現列表渲染”文章吧。

代碼如下：

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

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

    //那用什么？一般后端向前端返回數據，會帶上id之類的唯一標識符<br>
    <div v-for="(item, index) of listUnique" :key="item.id">
        {{item}}---{{index}}---{{item.id}}
    </div>

    <b >(怎樣讓性能最高呢？:key值要唯一，同時不能使用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>

    //除了數組，對象也可以做循環：<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>

這種方式加內容會馬上渲染出來：
Vue中如何實現列表渲染

而這樣卻不會渲染，但其實是加進數組了的。這是為啥捏？使用vue修改數組內容的時候不能用下標的方式，只能通過vue提供的幾個數組變異方法來操作數組才能實現數組變化頁面也跟著變，一共有七個方法，分別是push、pop、shift、unshift、reserve、splice、sort：
Vue中如何實現列表渲染