Vue--列表渲染的使用

最新推荐文章于 2023-05-12 14:37:21 发布

AI_GG

最新推荐文章于 2023-05-12 14:37:21 发布

阅读量269

点赞数 1

本文链接：https://blog.csdn.net/AI_GG/article/details/103587785

版权

简单介绍下列表渲染

普通列表
列表下标
有且只有一个对象
对象列表

以下是详细代码,代码中有详细的注解

<!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>列表渲染</title>
    

    <script src="js/vue.min.js"></script>


    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'div',
                data:{
                    // 列表
                    clist: ['a','b','c','d','e'],
                    // 对象
                    obj:{
                        name:'Tom',
                        age:15,
                        gender:'male'
                    },
                    //对象列表
                    objlist: [
                    {
                        name:'Tom',
                        age:15,
                        gender:'male'
                    },
                    {
                        name:'Jack',
                        age:16,
                        gender:'male'
                    },
                    {
                        name:'Rose',
                        age:17,
                        gender:'female'
                    },
                    ]
                }

            });
        }
    
    </script>
</head>
<body>
    
    <div>
        <!-- 展示普通列表 -->
        <li v-for="item in clist">{{item}}</li>

        <!-- 带索引的方式渲染列表值 -->
        <!-- 在获取索引时要注意,在遍历时,先是值后是索引  -->
        <p v-for="(item,index) in clist">{{index}} -- {{item}}</p>
        <hr>
        <p v-for="(index,item) in clist">{{index}} -- {{item}}</p>
        <hr>

        <!-- 条件渲染单个对象 -->
        <p v-for="v in obj">{{v}}</p>
        <!-- 获取key和值,顺序 也是先值后key -->
        <p v-for="(value, key) in obj">{{key}} --> {{value}} </p>
        <hr>
        <!--  条件渲染对象列表 -->
        <!-- 直接显示对象内容 -->
        <p v-for='person in objlist'>{{person}}</p>
        <hr>
        <!-- 显示对象中的数据 -->
        <p v-for='person in objlist'>Name:{{person.name}} Age: {{person.age}}  Gender: {{person.gender}}}</p>

    </div>



</body>
</html>