Vue2.0开发之——Vue基础用法-计算属性(28)

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • 计算属性-概述
  • 计算属性-默认方式
  • 计算属性-改造

二 计算属性-概述

2.1 什么是计算属性

  • 计算属性指的是通过一系列运算之后，最终得到一个属性值。
  • 这个动态计算出来的属性值可以被模板结构或 methods 方法使用

计算属性示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var vm = new Vue({
      el: '#app',
      data: {
        r: 0,
        g: 0,
        b: 0
      },
      methods: {
        show() {
          console.log(this.rgb)
        }
      },
      computed: {
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
    });

2.2 计算属性的特点

  • 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
  • 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

三 计算属性-默认方式

3.1 布局代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
   <div>
     <span>R：</span>
     <input type="text" v-model.number="r">
   </div>
   <div>
     <span>G：</span>
     <input type="text" v-model.number="g">
   </div>
   <div>
     <span>B：</span>
     <input type="text" v-model.number="b">
   </div>
   <hr>
   <div class="box" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }">
     {{ `rgb(${r}, ${g}, ${b})` }}
   </div>
   <button @click="show">按钮</button>
 </div>

3.2 vue代码

1
2
3
4
5
6
7
8
9
10
11
12
13
var vm = new Vue({
      el: '#app',
      data: {
        r: 0,
        g: 0,
        b: 0
      },
      methods: {
        show() {
          console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)
        }
      },
    });

3.3 效果图

四 计算属性-改造

4.1 布局代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <div id="app">
    <div>
      <span>R：</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G：</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B：</span>
      <input type="text" v-model.number="b">
    </div>
    <hr>
    <div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
    </div>
    <button @click="show">按钮</button>
  </div>

4.2 vue代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var vm = new Vue({
      el: '#app',
      data: {
        r: 0,
        g: 0,
        b: 0
      },
      methods: {
        show() {
          console.log(this.rgb)
        }
      },
      computed: {
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
 });

4.3 效果图