04-计算属性

小影

于 2021-01-11 10:04:27 发布

阅读量79

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/small_shadow/article/details/112462215

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-计算属性的基本使用

四种方法实现变量相加

<body>
    <div id="app">
      <!-- 直接并排写两个 -->
      <h2>{{begin}}{{end}}</h2>

      <!-- 加法 -->
      <h2>{{begin+end}}</h2>

      <!-- 函数 -->
      <h2>{{getLast()}}</h2>

      <!-- 计算属性 -->
      <h2>{{Last}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          begin: "小影",
          end: "真不错",
        },
        // computed是计算属性,看似函数，实则属性
        computed: {
          Last: function () {
            return this.begin + this.end;
          },
        },
        // methods的效率比computed更高，因为重复内容只需要计算一次
        methods: {
          getLast() {
            return this.begin + this.end;
          },
        },
      });
    </script>
  </body>

运行结果：
小影真不错
小影真不错
小影真不错
小影真不错

02-计算属性的复杂操作

三种方法计算总价格

<body>
    <div id="app">
      <h2>总价格1：{{All1}}</h2>
      <h2>总价格2：{{All2}}</h2>
      <h2>总价格3：{{All3}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          book: [
            {
              id: 1,
              name: "小影1",
              price: 100,
            },
            {
              id: 2,
              name: "小影2",
              price: 200,
            },
            {
              id: 3,
              name: "小影3",
              price: 300,
            },
            {
              id: 4,
              name: "小影4",
              price: 400,
            },
            {
              id: 5,
              name: "小影5",
              price: 500,
            },
          ],
        },
        computed: {
          // 三种方法计算总价钱
          All1: function () {
            let result1 = 0;
            for (let i = 0; i < this.book.length; i++) {
              result1 += this.book[i].price;
            }
            return result1;
          },
          All2: function () {
            let result2 = 0;
            for (let i in this.book) {
              result2 += this.book[i].price;
            }
            return result2;
          },
          All3: function () {
            let result3 = 0;
            for (let book of this.book) {
              result3 += book.price;
            }
            return result3;
          },
        },
      });
    </script>
  </body>

运行结果：
总价格1：1500
总价格2：1500
总价格3：1500

03-计算属性的setter个getter

计算属性一般是没有set方法，属于只读属性，只有一个get方法，部分内容隐藏

<body>
    <div id="app">
      <h2>{{begin}}{{end}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          begin: "小影",
          end: "真不错",
        },
        computed: {
        //   Last: {
        //     set: function () {},
        //     get: function () {
        //       return this.begin + this.end;
        //     },
        //   },
        
        // 计算属性一般是没有set方法，属于只读属性，
        // 只有一个get方法页面隐藏，所以就是下面这个样子了
          Last: function () {
            return this.begin + this.end;
          },
        },
      });
    </script>
  </body>