Vue学习笔记7：列表渲染

提辖鲁

已于 2022-06-08 20:28:00 修改

阅读量126

点赞数

分类专栏： Web # Vue.js 文章标签： vue.js javascript 前端

于 2022-02-08 19:59:01 首次发布

本文链接：https://blog.csdn.net/lj402159806/article/details/122830280

版权

Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

Vue.js

10 篇文章 0 订阅

订阅专栏

列表渲染

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <!-- v-for指令 基于一个数组来渲染一个列表 -->
        <!-- (item of items) items是源数据数组 item是被迭代的数组元素的别名 -->
        <!-- 第二参数index可选 (当前项的索引) -->
        <!-- 可以使用of替代in 更符合js迭代器语法(item of items) -->
        <!-- 在使用v-for时尽可能提供一个唯一的key，便于vue追踪每个节点从而重用和重排序 -->
        <li v-for="(item, index) in items" v-bind:key="item.id">
            {{parentMessage}} - {{index}} - {{item.message}}
        </li>
    </ul>
    <ul>
        <!-- v-for也可用于遍历对象property -->
        <!-- (value in object) object是源数据对象 value是被迭代的对象property别名 -->
        <!-- 第二参数key可选 (键名) -->
        <!-- 第三参数index可选 (索引) -->
        <li v-for="(value, key, index) in object">
            {{index}} - {{key}} : {{value}}
        </li>
    </ul>

    <!-- v-for也可以接收整数 此时会把模版重复对应次数 -->
    <span v-for="n in 10">{{ n }} </span>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            parentMessage: 'Parent',
            items: [
                {id: 0, message: 'Foo'},
                {id: 2, message: 'Bar'}
            ],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })
    setTimeout(function () {
        vm.items.splice(1, 0, {id: 1, message: '111'});
        vm.object.info = 'add info';
    }, 3000);
</script>
</body>
</html>

在这里插入图片描述

v-for与v-if一起使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for与v-if一同使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <!-- 使用计算属性配合v-for显示过滤/排序后的结果 -->
        <!-- 不将v-for与v-if同时用在同一个元素上(低效) -->
        <li v-for="todo in completedTodos" v-bind:key="todo.id"> {{todo.todo}}</li>
    </ul>

    <!-- 将v-if置于循环的外层 -->
    <ul v-if="completedTodos.length !== todos.length">
        <li v-for="todo in todos" v-bind:key="todo.id"> {{todo}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            todos: [
                {id: 0, todo: "todo1", isComplete: false},
                {id: 1, todo: "todo2", isComplete: true},
                {id: 2, todo: "todo3", isComplete: false},
            ]
        },
        computed: {
            completedTodos: function () {
                return this.todos.filter(function (value) {
                    return value.isComplete;
                })
            }
        }
    })
    setTimeout(function () {
        vm.todos[0].isComplete = true;
    }, 1500);
    setTimeout(function () {
        vm.todos[2].isComplete = true;
    }, 3000);
</script>
</body>
</html>

在这里插入图片描述

提辖鲁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记7：列表渲染

列表渲染v-for<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表渲染</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><
复制链接

扫一扫

专栏目录