1、v-for 列表渲染

• v-for 指令的基本语法是 item in items ，其中 items 是一个数组，而 item 则是数组中的每个元素。

下面是 v-for 指令列表渲染示例：

<template>  
<div>
  <h2>遍历数组</h2>
  <ul v-for="car in cars" :key = car.id>
    <li>
      | 序号：{{car.id}}  | 汽车：{{car.carName}}  | 价格：{{car.carPrice}}
    </li>
  </ul>

  <h2>遍历对象</h2>
  <ul v-for="(value,key,index) in car" :key = key>
    <li>
     {{index}}-{{key}}-{{value}} 
    </li>
  </ul>
</div>
</template>  
  
<script>  
export default {  
  data() {  
     return {  
      cars:[
        {
          id:'001',
          carName:'宝马',
          carPrice:'1000000'
        },
        {
          id:'002',
          carName:'奔驰',
          carPrice:'2000000'
        },
        {
          id:'003',
          carName:'奥迪',
          carPrice:'3000000'
        },

      ],
      car:{
        id:'004',
        carName:'法拉利',
        carPrice:'4000000'
      }
      } 
    }
  }
   
</script>

结果展示：

总结：

• 在上面例子中，遍历数组的时候 v-for 指令会遍历 cars 数组，并为每个元素创建一个
• 标签。每个
• 标签的内容则是当前遍历到的数组元素。
• 遍历对象的时候，使用 v-for=" (value, key, index) in car 来遍历 car 对象的属性和值。这里使用了三个参数：value 表示属性的值，key 表示属性的键名，index 表示遍历的索引。

---

2、列表过滤

下面是列表过滤示例：

<template>  
<div>
  <h2>列表过滤</h2>
  <input v-model="carName">
  <button @click="search">搜索</button>
  <ul v-for="car in filterCars" :key = car.id>
    <li>
      | 序号：{{car.id}}  | 汽车：{{car.carName}}  | 价格：{{car.carPrice}}
    </li>
  </ul>

</div>
</template>  
  
<script>  
export default {  
  data() {  
     return {  
      cars:[
        {
          id:'001',
          carName:'宝马',
          carPrice:'1000000'
        },
        {
          id:'002',
          carName:'奔驰',
          carPrice:'2000000'
        },
        {
          id:'003',
          carName:'奥迪',
          carPrice:'3000000'
        },

      ],
      carName:'',
      filterCars:[] 
      }
    },
    mounted(){
      this.filterCars = this.cars
    },
    methods:{
      search(){
        this.filterCars = this.cars.filter((car)=>{
          return car.carName.indexOf(this.carName) >= 0
        })
      }
    }
  }
</script>

结果展示：

总结：

• 上面例子中使用了指令 v-for 渲染列表，使用 mounted 钩子函数在组件挂载 DOM 后执行，将 cars 数组的内容复制到 filterCars 数组中，作为初始列表的内容。
• 通过数据双向绑定实时更新输入框中的值，再通过按钮监听事件中 search 方法过滤数组，并将过滤后的对象添加到 filterCars 数组中，简单实现了汽车列表过滤功能。

---

3、列表排序

下面是列表排序示例：

<template>  
  <div id="root">
    <h2>列表过滤</h2>
    <input v-model="carName">
      <button @click="search()" style="margin-left: 20px;">搜索</button>
      <button @click="search(1)" style="margin-left: 20px;">升序</button>
      <button @click="search(2)" style="margin-left: 20px;">降序</button>
      <ul  class="no-bullet" v-for="car in filterCars" :key = car.id>
        <li>
        | 序号：{{car.id}}  | 汽车：{{car.carName}}  | 价格：{{car.carPrice}}
        </li>
        </ul>

        </div>
        </template>  

<script>  
  export default {  
    data() {  
      return {  
        cars:[
          {
            id:'001',
            carName:'宝马',
            carPrice:'1000000'
          },
          {
            id:'002',
            carName:'奔驰',
            carPrice:'4000000'
          },
          {
            id:'003',
            carName:'奥迪A9',
            carPrice:'2000000'
          },
          {
            id:'004',
            carName:'奥迪A8',
            carPrice:'3000000'
          }

        ],
        carName:'',
        filterCars:[]
      }
    },
    mounted(){
      this.filterCars = this.cars
    },
    methods:{
      search(val){
        this.filterCars = this.cars.filter((car)=>{
          return car.carName.indexOf(this.carName) >= 0
        })
        if(val){
          this.filterCars = this.filterCars.sort((a,b)=>{
            return val === 1 ? a.carPrice - b.carPrice : b.carPrice - a.carPrice
          })
        }
      }
    }

  }
</script>
<style scoped>
  #root{
    margin-left: 50px;
  }
  .no-bullet{
    list-style-type: none;
  }
</style>

结果展示：

总结：

• 排序功能通过 search 方法的参数 val 来实现。当点击升序或降序按钮时，search 方法被调用并传入相应的参数（1代表升序，2代表降序）。
• 在 search 方法中，首先进行搜索过滤，然后根据 val 的值对 filterCars 数组进行排序。排序使用了数组的 sort 方法，通过比较汽车的价格来实现升序或降序排列。
• 升序排列时，a.carPrice - b.carPrice 返回一个小于0的值时 a 会排在 b 前面，从而实现升序；降序排列时， b.carPrice - a.carPrice 返回一个小于0的值时 b 会排在 a 前面，从而实现降序。