<div id="app">
  <div>R:<input type="text" v-model.number="r"></div>         <!-- .number是v-model的修饰符，将输入的值转化为数值类型 -->
  <div>G:<input type="text" v-model.number="g"></div>
  <div>B:<input type="text" v-model.number="b"></div>
  <hr>
  <!-- 这是用来显示颜色的盒子 -->
  <!-- :style是动态绑定样式，值是一个样式对象(目前只包含backgroundColor背景颜色) -->
  <!-- 绑定这个样式后，就可以控制div的背景颜色显示 -->
  <div class="box" :style="{backgroundColor:`rgb(${r}, ${g}, ${b})` }">
      {{ `rgb(${r}, ${g}, ${b})` }}
  </div>
  <button @click="show">按钮</button>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
    },
    methods: {
        show(){
            console.log(`rgb(${this.r}, ${this.g}, ${this.b})`);
        }
    },
  // 这段代码里面，字符串rgb(${r}, ${g}, ${b})重复写了很多遍，导致代码冗余
  // 解决办法：使用计算属性，实现代码复用
})

<div id="app">
  <div>R:<input type="text" v-model.number="r"></div>         <!-- .number是v-model的修饰符，将输入的值转化为数值类型 -->
  <div>G:<input type="text" v-model.number="g"></div>
  <div>B:<input type="text" v-model.number="b"></div>
  <hr>
  <div class="box" :style="{backgroundColor:rgb}">         <!-- 使用计算属性中的rgb -->
    {{ rgb }}
  </div>
  <button @click="show">按钮</button>
</div>

const vm = new Vue({
  el: '#app',
  data: {
    // 红色
    r: 0,
    // 绿色
    g: 0,
    // 蓝色
    b: 0               
  },
  methods: {
    show(){
      console.log(this.rgb);
    }
  },
  filters: {
  },
  watch: {
  },
  // 计算属性要写在computed节点下
  // 计算属性在定义的时候要定义成方法的格式
  computed: {
    // 定义相应的方法，一定得带return
    // 声明的是一个方法，但是在通过打印vm实例对象，发现这个方法在vm实例对象中是一个属性，所以使用这个计算属性生成的字符串时，要以vm实例中的属性来使用
    // 底层原理是调用了这个方法，然后将返回值放到vm实例中作为属性
    rgb(){
      return `rgb(${this.r}, ${this.g}, ${this.b})`
    }
    // 计算属性的完整写法
    // 当计算属性不需要被修改的时候，就使用上面的写法
    rgb: {
      get(){
        return `rgb(${this.r}, ${this.g}, ${this.b})`
      },
      /* 一般情况下，计算属性是不修改的(可以修改，但不改)。因为计算属性通常是在页面上展示的，人们常修改的是依赖的数据，所以通常用不到setter */
      set(value){
        const arr = value.split(',')
        this.r = arr[0]
        this.g = arr[1]
        this.b = arr[2]
      }
    }
  }
})