四、Vue计算属性

01-计算属性的基本使用1.1 计算属性1、在模板中可以直接通过插值语语法显示一些data中的数据2、但是在某些情况下，我们可能需要对数据进行一些转化后在显示，或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量，我们需要显示完整的名称但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}3、我们可以将上面代码

不会Java怎么找女朋友

4309人浏览 · 2021-01-03 20:34:32

不会Java怎么找女朋友 · 2021-01-03 20:34:32 发布

01-计算属性的基本使用

1.1 计算属性

1、在模板中可以直接通过插值语语法显示一些data中的数据
2、但是在某些情况下，我们可能需要对数据进行一些转化后在显示，或者需要将多个数据结合起来进行显示

比如我们有firstName和lastName两个变量，我们需要显示完整的名称
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}

3、我们可以将上面代码换成计算属性

计算属性是写在实例的computed选项中的

1.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-计算属性的基本使用</title>
</head>
<body>

<div id="app">
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{fullName}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      firstName: 'lin',
      lastName: 'willen'
    },
    computed: {
      // 不加get，这是计算属性，那么最好以属性命名
      fullName: function () {
        return this.firstName + ' ' + this.lastName;
      }
    },
    methods: {
      getFullName: function () {
        return this.firstName + ' ' + this.lastName;
      }
    }
  })
</script>
</body>
</html>

1.3 运行结果

在这里插入图片描述

02-计算属性的复杂操作

2.1 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-计算属性的复杂操作</title>
</head>
<body>

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      books:[
        {id: 1001, name: 'Unix编程艺术',price: 119},
        {id: 1002, name: '代码大全',price: 105},
        {id: 1003, name: '深入理解计算机原理',price: 99},
        {id: 1004, name: '现代操作系统',price: 109}
      ]
    },
    computed: {
      totalPrice: function () {
        // filter/map/reduce 高级用法
        let totalPrice = 0;
        // 用法一
        for (let i = 0; i < this.books.length; i++) {
          totalPrice += this.books[i].price;
        }
        // 用法二
        for (let i in this.books) {
          totalPrice += this.books[i].price;
        }
        // 用法三
        for (let book of this.books) {
          totalPrice += book.price;
        }
        return totalPrice;
      }
    }
  })
</script>
</body>
</html>

2.2 运行结果

在这里插入图片描述

03-计算属性的setter和getter

3.1 计算属性的setter和getter

每个计算属性都包括一个getter和一个setter
语法糖情况下，表示getter，取数据
setter一般不用

3.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-计算属性的setter和getter</title>
</head>
<body>

<div id="app">
  <h2>{{fullName}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      firstName: 'lin',
      lastName: 'willen'
    },
    computed: {
      // 计算属性的本质是个属性，所以Mustache语法不写成fullName()
      fullName: {
        set: function (newValue) {
          console.log('调用了fullName的set方法');
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get: function () {
          console.log('调用了fullName的get方法');
          return this.firstName + ' ' + this.lastName;
        }
      },
      // 大部分情况下set方法不会用到，所以经常用语法糖简写计算属性
      // fullName: function () {
      //   return this.firstName + ' ' + this.lastName;
      // }

    }
  })
</script>
</body>
</html>

3.3 运行结果

在这里插入图片描述
Console演示setter方法

04-计算属性和methods的对比

4.1 计算属性的缓存

methods和computed看起来都可以实现我们的功能
那么为什么还要多一个计算属性这个东西呢？
原因：计算属性会进行缓存，如果多次使用,计算属性只会调用一次，极大提高了性能
除非原属性发生改变，才会重新调用计算属性，更改属性值

4.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-计算属性和methods的对比</title>
</head>
<body>

<div id="app">
  <!--  1.直接拼接:语法过于繁琐-->
  <h2>{{firstName}} {{lastName}}</h2>
  <!--  2.通过定义methods-->
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <!--  3.通过computed-->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      firstName: 'lin',
      lastName: 'willen'
    },
    methods: {
      getFullName: function () {
        console.log('getFullName');
        return this.firstName + ' ' + this.lastName;
      }
    },
    computed: {
      fullName: function () {
        console.log('fullName');
        return this.firstName + ' ' + this.lastName;
      }
    }
  })
</script>
</body>
</html>

4.3 运行结果

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^