vue列表渲染

最新推荐文章于 2024-05-01 14:15:43 发布

Protagonists

最新推荐文章于 2024-05-01 14:15:43 发布

阅读量434

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/owc1874/article/details/80786143

版权

vue.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>07vue列表渲染</title>
    <script src="./vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'.box',
                data:{
                    dataList:['a','b','c','d','e','f'],
                    newObj:{
                        "name":"lucy",
                        "age":18
                    },
                    objDataList:[
                    {
                        "name":"genery",
                        "age":18
                    },
                    {
                        "name":"bulse",
                        "age":20
                    },
                    {
                        "name":"naev",
                        "age":23
                    }

                    ]
                }
            })

        }
    </script>
</head>
<body>
    <div class="box">
        <ul>

        <!-- v-for 列表数据 -->
        <li v-for="(item,index) in dataList">{{index}}---{{item}}</li>
        <li v-for="item in dataList">{{item}}</li>

        <!-- 对象 -->
        <li v-for="(value,key) in newObj">{{key}}-------{{value}}</li>
        <li v-for="value in newObj">{{value}}</li>
        <!-- 字典形式 -->
        <li v-for="datadict in objDataList">{{datadict}}</li>
        <li v-for="datadict in objDataList">{{datadict.name}}</li>
        <li v-for="datadict in objDataList">{{datadict.age}}</li>
        </ul>
        <div v-for="item in dataList">div: {{item}}</div>
    </div>
</body>
</html>

vue的列表渲染其实就是通过指令v-for可以将一组数据渲染到页面中,这一组数据可以是数组抑或是对象,v-for指令需要使用item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。

Protagonists

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue列表渲染

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫