Vue.js高效前端开发 【Vue列表渲染】

全部章节 >>>>

---

文章目录

• 一、v-for指令
• • 1、v-for指令使用
  • 2、实践练习（待更新）
• 二、计算属性
• • 1、计算属性创建和使用
  • 2、实践练习（待更新）
• 三、侦听属性
• • 1、侦听属性创建和使用
  • 2、实践练习（待更新）
• 四、综合案例
• • 1、商品信息管理
  • 2、 实践练习（待更新）
• 总结

---

一、v-for指令

1、v-for指令使用

• v-for指令基于一个数组来重复渲染元素。
• v-for指令通常用于显示列表和表格数据。
• v-for指令需要使用“item in items”形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。在v-for块中，开发者可以访问父作用域的属性。
• v-for还支持一个可选的第二个参数，即当前项的索引。
• 为了给Vue一个提示，以便它能跟踪每个行的数据，从而重用和重新排序现有元素，v-for指令需要为每项提供一个唯一key属性。

示例：使用v-for显示员工信息列表

<!-- HTML代码: -->
<div id="app" style="margin:20px auto;width:600px">
  <ul>
    <li v-for="(item,index) in items" :key="index">
      <a href="">{
  
  { index }}.{
  
  { item }}</a>
    </li>
  </ul>
</div>


// JavaScript代码:
var vm = new Vue({
  el: "#app",
  data: {
    items:["部门管理","员工管理","职务管理"]
  }
})

示例：使用v-for指令显示单个员工信息

<!-- HTML代码: -->
<div id="app" style="margin:20px auto;width:600px">
  <div v-for="(value,name,index) in emp">
    {
  
  { index }}.{
  
  { name }} : {
  
  { value }}
  </div>
</div>