vue-computed 计算属性

一、computed 计算属性

  • 在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂 时,就会变得臃肿甚至难以维护和阅读,例如:

    <div>
     写在双括号中的表达式太长了,不利于阅读
     {{text.split(',').reverse().join(',')}}
    </div>
    
    

    将这段操作text.split(‘,’).reverse().join(‘,’) 放到计算属性中,最终返回一个结果值就可以

  • 作用

    减少运算次数, 缓存运算结果. 运用于重复相同的计算.

二、代码演示

1、传统方式

  1. 代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <p>{{add()}}</p>
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            x: 1,
            y: 2,
          },
          methods: {
            add: function () {
              return this.x + this.y;
            },
          },
        });
      </script>
    </html>
    
    

2、computed 优化

  1. 修改代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <!-- <p>{{add()}}</p> -->
          <p>{{add}}</p>
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            x: 1,
            y: 2,
          },
          methods: {
            // add: function () {
            //   return this.x + this.y;
            // },
          },
          // 使用computed属性
          computed: {
            add: function () {
              return this.x + this.y;
            },
          },
        });
      </script>
    </html>
    
    
  2. 测试结果

    vue-computed 计算属性_第1张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)