Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）

最新推荐文章于 2024-05-16 15:21:00 发布

appleyk

最新推荐文章于 2024-05-16 15:21:00 发布

阅读量1.5w

点赞数 1

本文链接：https://blog.csdn.net/Appleyk/article/details/79219537

版权

Vue2.X前端学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

完整案列demo：

<html>

<head>
    <title>列表渲染--v-for遍历数组生成元素</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <!-- 遍历数组 -->
    <div>
        <ul id="example">
            <li v-for="(item,index) in items">{{item.message}} -- {{index+1}}</li>
        </ul>
    </div>

    <!-- 遍历对象，key-vaule键值对 -->
    <!-- 注意参数的顺序，不要乱来 -->
    <div>
        <ul id="example1">
            <li v-for="(value,key,index) in person">
                {{index+1}}:{{key}}:{{value}}
            </li>
        </ul>
    </div>

    <div>
        <!-- 计算属性 过滤得到偶数-->
        <ul id="example2">
            <li v-for="n in evennumbes">{{n}}</li>
        </ul>

        <!-- 不使用计算computed，使用普通方法过滤 得到奇数-->
        <ul id="example3">
            <li v-for="n in odd(numbers)">{{n}}</li>
        </ul>
    </div>

    <div id="example4">
        添加一个Todo：
        <!-- keyup.enter: input按下enter键，触发事件(方法) -- addTodoText  -->
        <input v-model="newTodoText" @keyup.enter="addTodoText" placeholder="add new Todo">
       
        <!-- 使用注册组件方法1：标记li是一个"todo-item"类型的组件，解决浏览器潜在的解析错误 -->
        <!-- <ul>
            <li is="todo-item" v-for="(todo,index) in todos" :key="todo.id" :title="todo.title" @removeTodo="todos.splice(index,1)"></li>
        </ul> -->
        <!-- 使用注册组件方法2：直接使用"todo-item"类型的组件 注意组件模板中的绑定值需要指定 否则组件渲染失败-->
        <ul>
            <!-- splice方法，对数组或列表中指定的index上的元素进行添加/删除操作，第二个参数(删除的项目数量)等于0表示不删除，等于1表示删除 -->
            <todo-item v-for="(todo,index) in todos" :key="todo.id" :title="todo.title" @removetodo="todos.splice(index,1)"></todo-item>
        </ul>
    </div>
</body>
<script>
    // 注册组件
    Vue.component('todo-item', {
        //$emit 触发自定义事件 removetodo
        template: "<li>{{title}}   <button @click=\"$emit('removetodo')\">删除</button></li>",
        //属性title 和 todo.title 对应
        props: ['title']
    })
    var app5 = new Vue({
        el: '#example4',
        data: {
            newTodoText: '',
            todos: [{
                    id: 1,
                    title: '打篮球',
                },
                {
                    id: 2,
                    title: '玩自由之战',
                },
                {
                    id: 3,
                    title: '学习'
                }
            ],
            newID: 4 //添加新元素，从4开始往后叠加++
        },
        methods: {
            addTodoText: function () {
                //console.log(this.newTodoText)
                this.todos.push({
                    id: this.newID++,
                    title: this.newTodoText
                })
                // 将newTodoText重置为空 避免干扰再次添加Todo
                this.newTodoText = ''
            }
        }
    })
    var app3 = new Vue({
        el: '#example2',
        data: {
            numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        },
        //    计算偶数，必须是getter性质的，必须return
        computed: {
            evennumbes: function () {
                //filter过滤函数，参数是一个boolean类型的值，函数过滤满足参数条件的对象集合并返回
                return this.numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    })

    var app4 = new Vue({
        el: '#example3',
        data: {
            numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        },
        //    计算偶数，必须是getter性质的，必须return
        methods: {
            odd: function (numbers) {
                return numbers.filter(function (number) {
                    return number % 2 != 0
                })
            }
        }
    })

    var app = new Vue({
        el: '#example',
        data: {
            items: [{
                    message: '篮球'
                },
                {
                    message: '足球'
                },
                {
                    message: '田径'
                }
            ]
        }
    })

    var app2 = new Vue({
        el: '#example1',
        data: {
            person: {
                firstName: 'yu',
                lastName: 'kun',
                sex: 'Male',
                age: 27

            }
        }
    })
</script>

</html>

一、遍历数组

（1）DOM

（2）数据模板

v-for指令相当于C#中的foreach，Java中的加强for，格式：item in items，items为数组或者集合，item为遍历数组或集合时取出的单个对象，当然，vue也支持取出对象所在的位置index，也就是（item，index） in items，注意参数的顺序不要搞错了！

（3）显示

二、遍历对象（map），以键值对k：v的形式渲染DOM

（1）DOM

（2）数据模板

和遍历数组一样，遍历map对象时，注意参数顺序，也可以单独只取出value，比如 v-for="value in person"

(3)显示

三、结合computed+filter函数，遍历过滤后的偶数/奇数数组

（1）DOM

（2）数据模板

 
 （3）显示 

四、v-for指令与组件注册相结合实现todos的添加和删除
 
（1）DOM

 （2）todo-item组件注册

 
 注意自定义事件的名称：removetodo 要小写，不要写成removeTodo，遵循W3C标准 

 
 （3）数据模板
  

给v-for中的每一个元素，实际上是一个li元素，赋予一个唯一的key值（id）

2.2.0+ 以上版本中，当对组件使用 v-for 时，必须设置 key 属性

（3）显示

appleyk

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）

完整案列demo：列表渲染--v-for遍历数组生成元素 {{item.message}} -- {{index+1}} {{index+1}}:{{key
复制链接

扫一扫

专栏目录