vue初学-列表渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>列表渲染</title>
    <script src="vue.js" type="text/javascript" ></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 可以使用 of代替in
            字段顺序是不能变的 -->
            <li v-for="item,index,key in items">
                {{item.message}}_{{index}}
            </li>
        </ul>

        <ul>
            <li v-for="value,key, index in object">
                {{key}}_{{value}}_{{index}}
            </li>
        </ul>
    </div>
</body>

<script>
    var vm = new Vue({
        el: "#app", 
        data: {
            items: [
                {message: "list1"},
                {message: "list2"},
                {message: "list3"}
            ],
            object: {
                test1: "value1",
                test2: "value2", 
                test3: "value3"
            }
        }
    });
</script>

</html>

状态维护

v-for渲染元素列表时, 默认使用就地更新的策略。如果数据项的顺序改变,Vue不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,且确保他们在每个索引位置正确渲染。
为了给Vue的一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的key attribute。

建议在使用v-for时提供key attribute,除非遍历输入的DOM内容非常简单,或者可以依赖默认行为以获取性能上的提上

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for ...
    Sunshinga阅读 1,531评论 0 0
  • 条件渲染 v-if 在<template>元素上使用v-if条件渲染分组 最终的渲染结果将不包含<template...
    oWSQo阅读 4,145评论 1 0
  • 用 v-for 把一个数组 对应为 一组元素 我们使用 v-for 指令根据数组的列表来进行渲染。v-for指令需...
    XKolento阅读 3,826评论 0 12
  • 列表循环 v-for 将一个数组对应为一组元素 v-for指令根据数组选项列表进行渲染,使用时需使用item in...
    JunChow520阅读 8,531评论 0 1
  • v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in it...
    angelwgh阅读 3,865评论 0 0

友情链接更多精彩内容