计算属性computed与methods

计算属性computed与methods的区别：首先是使用methods如果执行了一个函数。那么它里面的全部函数都会执行。但是使用计算属性就不一样，它只是单对单的执行，不会去执行你不要执行的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性7.1</title>
</head>

<body>
  <!-- computed计算属性不是方法，所以在html里面不再需要括号 -->
  <div id="app">
    <div>
      <p>componentd 计算属性7.1</p>
    </div>
    <div>
      <button v-on:click='a++'>点击+1</button>
      <p>{{a}}</p>
    </div>

    <div>
      <button v-on:click='b--'>臭弟弟-1</button>
      <p>{{b}}</p>
    </div>
    <p>点击+1：{{ aadA }}</p>
    <p>臭弟弟：{{ dd }}</p>
  </div>
  <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        a: 0,
        b: 0,
        sum: 10,
        num: 10
      },
      methods: {
        //  methods里面的方法一旦被触发其中一个，就会全部被触发,
        // 点击相加其中一个都可以看到在控制台里面输出了两个
        // addA: function () {
        //   console.log('add')
        //   return this.a + this.sum;
        //   console.log(this.a + this.sum)
        // },
        // dd() {
        //   console.log('cdd')
        //   return this.b + this.sum;
        //   console.log(this.b + this.sum)
        // }
      },
      computed: {
      //计算属性
        aadA() {
          console.log('+a')
          return this.a + this.num;
          console.log(this.a + this.num)
        },
        dd() {
          console.log('-d')
          return this.b + this.num;
          console.log(this.b + this.num)
        }
      },
    })
  </script>
</body>

</html>

posted @ 2020-01-31 21:04  不知道，不明了  阅读(411)  评论(0)  编辑  收藏  举报