获取Vue评分最多的列表渲染

今天打算写一个简单的Vue列表渲染，不过想要获取评分最多的内容，用判断大于8.0以上就可以获取内容。暂时不用写Axios请求API接口获取内容，可以在data属性里面增加数据。

HTML文件：

+ <div id="app">
+  <ul>
+    <li v-for="item,index in movies">
+      {{item.title}}
+      {{item.rating.everage}}
+    </li>
+  </ul>
+ </div>
+ <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

创建一个 Vue 实例

+ var app = new Vue({
+  el: '#app',
+  data: {
+    movies: [
+    {
+        title: '无翼鸟',
+        rating: {
+          max: 10,
+          numRaters: 900,
+          everage: 9.0,
+          min: 0
+        },
+      },
+      {
+        title: '无问西东',
+        rating: {
+          max: 10,
+          numRaters: 714,
+          everage: 7.4,
+          min: 0
+        },
+      },
+      {
+        title: '肖申克的救赎',
+        rating: {
+          max: 10,
+          numRaters: 916,
+          everage: 9.6,
+          min: 0
+        },
+      },
+      {
+        title: '追龙',
+        rating: {
+          max: 10,
+          numRaters: 713,
+          everage: 7.3,
+          min: 0
+        }
+      }
+    ]
+  }
+  
+  
+ })

然后渲染出来的样子：

* 无翼鸟 9
* 无问西东 7.4
* 肖申克的救赎 9.6
* 追龙 7.3

但是这个不是我想要的结果，可以用v-if判断一下获取内容，现在增加一下：

 <div id="app">
    <ul>
-      <li v-for="item,index in movies">
+      <li v-if="item.rating.everage > 8.0" v-for="item,index in movies">
            {{item.title}}
            {{item.rating.everage}}
       </li>
    </ul>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

最终效果图：

* 无翼鸟 9
* 肖申克的救赎 9.6