【Vue.js】008-列表渲染

原创

訾博ZiBo 2023-02-23 09:28:20 博主文章分类：Vue.js ©著作权

文章标签 vue javascript 列表数组 html 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者訾博ZiBo的原创作品，请联系作者获取转载授权，否则将追究法律责任

最后更新：2021年1月16日14点43分

一、用 v-for 把一个数组对应为一组元素

1、概述

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名；

2021年1月16日14点43分

官方建议我们在使用v-for的时候，给对应的元素或组件添加上一个:key属性；

【Vue.js】008-列表渲染_html

2、代码演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 简单使用 -->
      <ul id>
        <li v-for="item in items" :key="item.message">
          {{ item.message }}
        </li>
      </ul>
      <!-- 访问父父作用域的属性，使用当前项索引 -->
      <ul id>
        <li v-for="(item, index) in items">
          {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
      </ul>
      <!-- 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法 -->
      <ul id>
        <li v-for="(item, index) of items">
          {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
      </ul>
    </div>
    <script>
      var vue = new Vue({
        el: "#app", 
        data : {
          parentMessage : "Parent",
          items: [
                { message: 'Foo' },
                { message: 'Bar' }
              ]
        }
      });
    </script>
  </body>
</html>

3、运行结果

【Vue.js】008-列表渲染_javascript_02

二、在 v-for 里使用对象

1、概述

你也可以用 v-for 来遍历一个对象的属性；

2、代码演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 你也可以用 v-for 来遍历一个对象的 property -->
      <ul>
        <li v-for="value in object">
          {{ value }}
        </li>
      </ul>
      <!-- 你也可以提供第二个的参数为 property 名称 (也就是键名) -->
      <ul>
        <li v-for="(name, value) in object">
          {{ name }} : {{ value }}
        </li>
      </ul>
      <!-- 还可以用第三个参数作为索引 -->
      <ul>
        <li v-for="(name, value, index) in object">
          {{ index }} : {{ name }} : {{ value }}
        </li>
      </ul>
      <!-- 在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它
      的结果在不同的 JavaScript 引擎下都一致。 -->
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          object: {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10'
          }
        }
      });
    </script>
  </body>
</html>

3、运行截图

【Vue.js】008-列表渲染_javascript_03

三、维护状态

【Vue.js】008-列表渲染_数组_04

【Vue.js】008-列表渲染_列表_05

四、数组更新检测

1、变更方法

【Vue.js】008-列表渲染_html_06

2、替换数组

【Vue.js】008-列表渲染_列表_07

五、显示过滤/排序后的结果

1、概述

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

2、代码演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 使用计算属性 -->
      <li v-for="n in evenNumbers">
        {{ n }}
      </li>
      <!-- 使用一个方法 -->
      <ul v-for="set in sets">
        <li v-for="n in even(set)">
          {{ n }}
        </li>
      </ul>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          numbers: [1, 2, 3, 4, 5],
          sets: [
            [1, 2, 3, 4, 5],
            [6, 7, 8, 9, 10]
          ]
        },
        computed: {
          evenNumbers: function() {
            return this.numbers.filter(function(number) {
              return number % 2 === 0
            })
          },
        },
        methods: {
          even: function(numbers) {
            return numbers.filter(function(number) {
              return number % 2 === 0
            })
          }
        }
      });
    </script>
  </body>
</html>