vue中的计算属性

1、什么是计算属性

• 如果模板中的表达式存在过多的逻辑，那么模板会变得臃肿不堪，维护起来也异常困难，因此为了简化逻辑出现了计算属性；

<template>
  <div id="example">
    <p>{{message.split(" ").reverse().join('!')}}</p>
  </div>
</template>
<script>
export default {
  name: "example",
  data() {
    return {
      message : 'i am chinese person'
    };
  },
  methods : {

  },
  mounted(){

  }
};
</script>

上述表达式比较繁琐，因此我们采用计算属性实现

• 特点：在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以；

<template>
  <div id="example">
    <p>源数据：{{message}}</p>
    <p>更改后的数据：{{changeMessage}}</p>
  </div>
</template>
<script>
export default {
  name: "example",
  data() {
    return {
      message : 'i am chinese person'
    };
  },
  computed : {
//getter方法
    changeMessage : function(){//无需进行声明
      return this.message.split(" ").reverse().join('!')
    }
  }
};
</script>

• 计算属性拥有的两个方法：getter   setter   用来实现数据的双向绑定

<template>
  <div id="example">
    <p>给定以下三个词语组成一句话</p>
    <span>{{combine}}</span>    
    <span>{{mom}}</span>    
    <span>{{dad}}</span>    
    <p style="padding:12px 0">答案为：{{result}}</p>
    <button @click="btn">改变语句</button>
  </div>
</template>
<script>
export default {
  name: "example",
  data() {
    return {
      mom: "妈妈",
      dad: "爸爸",
      combine: "组成了一个家"
    };
  },
  computed: {
    result : {//与不写get  set方法的形式有区别
      //一个计算属性的getter
      get : function(){//三个值变化的时候，result的值会自动更新，也会自动更新DOM结构
        return this.mom +  this.dad + this.combine
      },
      // 一个计算属性的setter
      set : function(newVal){//当设置result的时候，其他的值也会相应的发生改变
        this.mom = newVal.substr(0,2);
        this.dad = newVal.substr(2,2);
        this.combine = newVal.substr(4)
      }
    }
  },
  methods : {
    btn(){
      this.result = "医生警察为人民服务"
    }
  }
};
</script>