Vue的计算属性,方法与侦听器以及计算属性的 getter 和 setter

妖狐艹你老母 2022-04-22 09:10 220阅读 0赞

**计算属性**：优先推荐，原因：既简洁又性能高

<body>
      <div id="app">
        {
       {fullName}}
        {
       {age}}
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            firstName: 'hello',
            lastName: 'world',
            age: 28
          }, 
          // 计算属性
          computed: {
            fullName: function() {
              console.log("计算了一次");
              return this.firstName + " " + this.lastName;
            }
          }
        })
      </script>
    <body>

**方法**

<body>
      <div id="app">
        {
       {fullName()}}
        {
       {age}}
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            firstName: 'hello',
            lastName: 'world',
            age: 28
          }, 
          methods: {
            fullName: function() {
              console.log("计算了一次");
              return this.firstName + " " + this.lastName;
            }
          }
        })
      </script>
    <body>

**侦听器**

<body>
      <div id="app">
        {
       {fullName}}
        {
       {age}}
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            firstName: 'hello',
            lastName: 'world',
            fullName: 'hello world',
            age: 28
          },
          watch: {
            firstName: function() {
              console.log("计算了一次");
              this.fullName = this.firstName + " " + this.lastName;
            },
            lastName: function() {
              console.log("计算了一次");
              this.fullName = this.firstName + " " + this.lastName;
            }
          }
        })
      </script>
    <body>

**计算属性的 getter 和 setter**

<body>
      <div id="app">
        {
       {fullName}}
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            firstName: 'hello',
            lastName: 'world',
          }, 
          // 计算属性
          computed: {
            fullName: {
              get: function() {
                console.log("计算了一次");
                return this.firstName + " " + this.lastName;
              }
              set: function(value) {
                var arr = value.split(" ");
                this.firstName = arr[0];
                this.lastName = arr[1];
              }
            }
          }
        })
      </script>
    <body>