Vue--列表渲染的使用

最新推荐文章于 2024-07-08 09:33:30 发布

原创最新推荐文章于 2024-07-08 09:33:30 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了Vue.js中列表渲染的基本概念与实践，包括普通列表、带索引的列表渲染、单个对象及对象列表的条件渲染。通过具体代码示例，详细解释了如何使用v-for指令进行数据绑定和展示。

简单介绍下列表渲染

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

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

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