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"

就可以获取后台传过来的值。是不是非常的简单,如果还是不会用的话就私信我吧

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