Vue的列表渲染

在前後端交互時。我們會向前端發送很多數據,這些數據,往往被封裝在一個集合中,而數據傳送到前端後。

前端程序員會將這些數據展示給用戶。

至於如何展示這些數據,我相信大家都有自己的想法。我這裏重點介紹Vue的條件渲染:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <template v-for="(item,key,index) of userInfo" :key="item.id">
            <div>
                {{item}}--------------{{key}}-----{{index}}
            </div>
            <span>
                {{item}}
            </span>
        </template>

    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            userInfo:{
                name: 'Dell',
                age: 28,
                gender: 'male',
                salary: 'secret'
            }
        }
    });
</script>
</html>

以上data中的數據就是模擬後臺傳輸過來的一個對象。而在JavaScript中對象本身就可以看作數組。

我們只需要在div中添加一行代碼:

v-for="(item,key,index) of userInfo" :key="item.id"

就可以獲取後臺傳過來的值。是不是非常的簡單,如果還是不會用的話就私信我吧

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章