vue的computed,动态class，nextTick简单使用

**computed的使用**
**视图**
 <p v-for="subject in results" :key="subject">
    <span>Marks for: {{ subject.ages }}</span>
  </p>
  <p>
    Total marks are: {{ totalages }}
  </p>

**js**
 computed:{
    totalages:function(){
      let total = 0;
      let that = this;
      for(let i=0;i<that.results.length;i++){
        total+=parseInt(that.results[i].ages)
      }
      return total
    }
  },

**动态class**
<!-- 1 使用computed属性 -->
    <div id="example" class="static" v-bind:class="haha">的风景的话</div>
    <!-- 2 数组语法 -->
     <div id="example" class="static" v-bind:class="[class2]">订饭订饭订</div>
     <!-- 3 对象语法 -->
    <div :class="{active:isactive}">多放点胡椒粉</div>
    <!-- 4 数组与三元运算符结合判断选择需要的class
    注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染 -->
    <div :class="[activefalse == 1? 'active' : 'blue']">你好</div>

**动态class的js操作**
export default {
  data() {
    return {
      isactive:true, //3 对象语法
      activefalse:2, //4 数组三元运算符
      class1: 'orange',
      class2: 'green', //2 数组语法
      age: 4, //1 使用computed属性
      }
      }
      //1 使用computed属性
      computed: {
      haha: function() {
        return {
          'orange': this.age > 3 ? true : false,
        }
      }
    },
    }

**动态class样式**
<style>
.orange {
  color:  orange;
}
.green {
  color:  green;
  }
.active{
   color:red;
}
.blue{
  color: blue;
}
.red{
  color: red;
}
</style>

**nextTick简单使用******
<input type="button" value="点我呀" @click="changeStr" />
 <p ref="myP">{{str}}</p>
 export default {
  data() {
    return {
      str: "公众号 张培跃，关注它的人很少！",
    };
  }
  }
  **第一种使用方式**
   created() {
    this.$nextTick(() => {
      this.$refs.myP.innerText =
        "我是一只小小小小鸟，想要飞，却怎么样也飞不高！";
    });
  },
  **第二种使用方式**
   methods: {
    changeStr() {
      this.$nextTick(() => {
        console.log(this.$refs.myP.innerText);
        this.str = "欢迎关注公众号 张培跃，收看更多精彩内容！";
      });
      this.str = "我爱你中国，我亲爱的母亲！";
    }
    }