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 = "我爱你中国,我亲爱的母亲!";
    }
    }

猜你喜欢

转载自blog.csdn.net/weixin_43959276/article/details/106064891