v-for的练习，渲染电影列表（可以实现简单的排序）

电影排名的效果图 

 想用v-for实现简单信息列表渲染，则首先页面创建div

<div id="app">

  <table>

    <tbody>

      <tr align="center">

        <th width="100">排名</th>

        <th width="200">电影名称</th>

        <th width="100">票房</th>

      </tr>

      <tr v-for="(movie,index) in movies" align="center">

        <td>{{index+1}}</td>

        <td>{{movie.name}}</td>

        <td>{{movie.boxOffice}}亿</td>

      </tr>

    </tbody>

  </table>

</div>

其次需要在下面引入本地Vue

<script src="../js/vue.js"></script>

然后写js

 const vm = new Vue({
    el: '#app',
    data: {
      movies: [
        { name: '红海行动', boxOffice: '36.5' },
        { name: '唐人街探案2', boxOffice: '33.5' },
        { name: '我不是药神', boxOffice: '32.8' },
        { name: '西红市首富', boxOffice: '28.3' },
        { name: '捉妖记2', boxOffice: '22.1' },
        { name: '海王', boxOffice: '20.6' },
        { name: '侏罗纪2', boxOffice: '15.9' }
      ]
    }
  })

最后如果想根据票房数量的大小排序，则

  //用sort()排序
  vm.movies.sort(function (a, b) {
    let x = a.boxOffice;
    let y = b.boxOffice;

    return x > y ? 1 : -1 
    //倒序x > y
    //正序x < y
  })

---

 附上CSS代码

    table {
      border-collapse: collapse;
    }

    tbody {
      border: 1px solid #ccc;
    }

    tr {
      height: 50px;
      border-bottom: 1px solid #ccc;
    }

    tr:nth-child(odd) {
      background-color: antiquewhite;
    }

    tr:nth-child(even) {
      background-color: aqua;
    }