vue的computed属性

Posted on 2019-03-24 22:36  猫头唔食鱼  阅读(236)  评论(0编辑  收藏  举报

vue的computed属性要注意的两个地方,1,必须有return,2,使用属性不用括号

<div>
  <input type="text" v-model="num1">
  <p></p>
  <input type="text" v-model="num2">
  {{sum}}

  <input type="text" v-model="text">
  {{getLength}}
</div>
<script>
export default {
  name: "component_name",
  data() {
    return {
      num1: 0,
      num2: 0,
      text: ""
    };
  },
  // computed属性必须有return
  computed: {
    sum() {
      this.num1 = parseInt(this.num1);
      this.num2 = parseInt(this.num2);
      return this.num1 + this.num2;
    },
    getLength() {
      return this.text.length;
    }
  }
};
</script>