vue学习路(三)：computed计算属性，字符串翻转+成绩筛选

vue-computed计算属性

什么是计算属性？可以简单的理解能够在里面写一些计算逻辑的属性。

特点：

1. 能够处理data数据，并返回处理后的数据结果，供页面直接使用。
2. 能够监测到data的变化，重新触发计算。
3. data不变的情况下，第一次运算的结果可以多次重复使用，相当于被缓存起来。
4. computed计算属性内可以非常灵活的处理数据。
5. 降低了代码冗余度(相比较不使用计算属性而言)。

只看到这里还是有点懵，下面通过两个小demo可以更加深入的了解computed计算属性。

demo1——字符串翻转

<div id="app">
        不使用computed计算属性实现翻转字符串 
        <!-- 缺点：代码冗余度高 ，每一个{
   {}}中都执行一次运算-->
        <h1>{
  {msg.split('').reverse().join('')}}</h1>
        <h1>{
  {msg.split('').reverse().join('')}}</h1>
        <h1>{
  {msg.split('').reverse().join('')}}</h1>
        使用了computed计算属性：
        <!-- 代码的冗余度低，虽然调用了三次，但是只计算了一次 -->
         <!-- 直接调用computed中的属性 -->
        <h1>{
  {reverseMsg}}</h1>
        <h1>{
  {reverseMsg}}</h1>
        <h1>{
  {reverseMsg}}</h1>
    </div>
    <script>
        new Vue({