7. [vuejs-05] 项目：[v-for] 指令

[vuejs-05] 项目介绍了 [v-for] 指令：

7.1. 主脚本 [main.js]

主脚本 [main.js] 的代码与前几个项目中的 [main.js] 脚本完全相同。

7.2. 主组件 [App]

[App] 组件的代码如下：


<template>
  <b-container>
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-05] : attribut [v-for]</h4>
      </b-alert>
      <VFor />
    </b-card>
  </b-container>
</template>
 
 
<script>
  import VFor from "./components/VFor.vue";
 
  export default {
    name: "app",
    components: {
      VFor
    }
  };
</script>

第 7、14、19 行：[App] 组件使用了 [VFor] 组件；

7.3. [VFor] 组件

视觉输出效果如下：

[VFor] 组件的代码如下：


<template>
  <div>
    <!-- a drop-down list -->
    <b-dropdown id="dropdown" text="Options">
      <b-dropdown-item v-for="(option,index) in options"
                       :key="option.id"
                       @click="select(index)">{{option.text}}</b-dropdown-item>
    </b-dropdown>
    <!-- button -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- alert -->
    <b-alert show variant="danger" v-if="error" class="mt-3">
      Les erreurs suivantes se sont produites :
      <br />
      <ul>
        <li v-for="(erreur,index) in erreurs" :key="index">{{erreur}}</li>
      </ul>
    </b-alert>
  </div>
</template>
<!-- script -->
<script>
  export default {
    name: "VFor",
 
    // propriétés statiques du composant
    data() {
      return {
        // liste des erreurs
        erreurs: [],
        // erreur ou pas
        error: false,
        // liste des options du menu
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },
 
    // méthodes
    methods: {
      // génération d'une liste d'erreurs
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // l'utilisateur a sélectionné une option
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

第 4 行：<b-dropdown> 标签用于定义一个下拉列表 [1]，其形式为一个按钮，点击该按钮即可查看列表选项 [2]。[text='Options'] 定义了按钮上显示的文本 [1]；
第 5–7 行：<dropdown-item> 标签定义下拉列表中的一个项目；
第 5 行：[v-for] 属性表示 <dropdown-item> 标签必须针对组件 [options] 属性（第 37–41 行）中的每个 [option] 元素进行重复。[index] 表示该元素在列表中的序号 [0, 1, ..., n]。[option] 元素的名称和索引均为任意值。我们也可以这样写：[<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>];
第 6 行：如果省略 [key] 属性，ESLint 会发出警告。 [key] 属性的值必须始终保持一致。因此，元素的 [index] 值并不合适。因为如果移除此元素，列表中后续元素的 [index] 值将会减 1。因此，这里我们使用 [option.id] 作为键值（第 38–40 行），即使移除某个元素，该值也不会改变。[key] 属性由 [Vue.js] 用于在列表需要重新渲染时优化 DOM（文档对象模型）的重新渲染。请注意 [:key] 这种写法，因为 [key] 具有动态值；
第 7 行：当用户点击列表中的某项时，将调用第 49–51 行中的 [select(index)] 方法；
第 7 行：选项文本将取自第 37–41 行定义的 [option.text] 值；
第 10 行：[3] 按钮。[class=’ml-3’] 表示左侧 (l) 留有三个间隔符的边距 (m)。[@click="generateErrors"] 表示当点击该按钮时，将执行第 45–48 行中的 [generateErrors] 方法。 [v-if="!error"] 表示按钮的显示取决于第 35 行静态 [error] 属性的值；
第 15–21 行：一个 [danger] [4] 提示框，同样由第 35 行的静态 [error] 属性控制。[class=’mt-3’] 属性（顶部留白 3 个间隔符）设置了此提示框与其上方元素之间的间距；
第 27 行：HTML 标签 <br /> 创建换行；
第 18 行：无序列表 [ul=unordered list] 的开头；
第 19 行：<li> 标签定义了一个列表项 <ul>。这里我们再次使用 [v-for] 指令来多次生成该标签——生成次数等于第 33 行 [errors] 数组中的元素个数。此处我们使用了 [:key=index] 属性。我们之前提到，列表项的索引并不是区分列表项的好方法，因为如果删除一个项，所有后续项的索引都会改变。但在此处这并不重要，因为错误列表中的项不太可能被删除；
第 19 行：此行用于显示 [errors] 列表中的 [error] 元素；
第 30–43 行：[template] 中的所有动态元素都是组件的属性。这里没有由父组件设置值的 [props] 属性；
第 48–55 行：[generateErrors] 方法生成错误列表，该列表将由第 16–18 行的 <ul> 标签显示。此外，它还修改了静态 [error] 属性，既用于显示该错误列表（第 15 行），也用于隐藏生成按钮（第 13 行）；

7. [vuejs-05] 项目：[v-for] 指令

7.1. 主脚本 [main.js]

7.2. 主组件 [App]

7.3. [VFor] 组件

7.4. 运行项目