v-for

1）一级循环

<ul>
  <li v-for="item of list"
      :key="item.id">{{item.text}}</li>
</ul>

data () {
  return {
    list: [
      { id: '001', text: 'a' },
      { id: '002', text: 'b' },
      { id: '003', text: 'c' }
    ]
  }
}

2）多级循环

<div>
  <div v-for="(item,index) of list"
       :key="index">
    <ul>{{item.title}}
      <li v-for="(item2,index2) of list[index].text"
          :key="index2">{{item2.t1}} {{item2.t2}}</li>
    </ul>
  </div>
</div>

data () {
  return {
    list: [
      {
        title: 'a',
        text: [{
          t1: 'a1',
          t2: 'a2'
        }]
      },
      {
        title: 'b',
        text: [{
          t1: 'b1',
          t2: 'b2'
        }]
      }
    ]
  }
},

3）点击循环出来的某项变色

<template>
  <ul>
    <li v-for="item of list"
        :key="item.id"
        @click="Change(item.id)"
        :class="{active:item.id==current}">{{item.text}}</li>
  </ul>
</template>

<script>
export default {
  name: 'for1',
  data () {
    return {
      current: null,
      list: [
        { id: '001', text: 'a' },
        { id: '002', text: 'b' },
        { id: '003', text: 'c' }
      ]
    }
  },
  methods: {
    Change: function (b) {
      this.current = b
    }
  }
}
</script>

<style>
.active {
  color: red;
}
</style>

4）数组循环

<td v-for="(value,index) in theadData"
    :key="index">
  {{value}}
</td>