Vue.js学习笔记（3）计算属性(computed)

今天给大家分享下vue.js中的计算属性(computed)

示例一

computed的get属性

html:

<template>
  <div class="input-text">
    <input type="text" v-model='firstName'>
    <input type="text" v-model='lastName'>
    {{fullName}}
  </div>
</template>

js:

<script>
export default {
  components: {

  },
  ready: function() {

  },
  methods: {
  },
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName: {
      // getter
      get: function() {
        return this.firstName + ' and ' + this.lastName
      },
      // setter
      set: function(newValue) {
        var names = newValue.split(' and ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
}
</script>

示例二

computed的get和set属性:

html:

<template>
  <div class="input-text">
    <input type="text" v-model='a'>{{b}}
    <input type="button" value="修改b的值"  @click='updateData'>
    <input type="text" v-model='c'>
  </div>
</template>

js:

<script>
export default {
  components: {
  },
  ready: function() {
  },
  methods: {
    updateData:function(){
      this.b=this.b;//给 b 重新赋值时就会调用  b 的  set  属性,从而改变 c 的值
    }
  },
  data() {
    return {
      a:'1:30',
      c:''
    }
  },
  computed: {
    b:{
      get: function() {//通过a的值改变b的值
        var time=this.a;
        time = time ? time.split(':') : '';
        let hours = time[0];
        let minutes = time[time.length - 1];
        return parseInt(hours) * 60 + parseInt(minutes);
      },
      set:function(newValue){//通过b值的改变,设置 c  的值
        let newTimes = newValue;
        let hoursTime = parseInt(newTimes) / 60;
        let minutesTime = parseInt(newTimes) % 60;
        newTimes = newTimes + '';
        hoursTime = hoursTime + '';
        hoursTime = hoursTime ? hoursTime.split('.') : '';
        this.c = hoursTime[0] + ':' + minutesTime;
        console.log(hoursTime[0] + ':' + minutesTime);
      }
    }
  }
}
</script>