vue的计算属性（和一点lable标签的使用）

计算属性可以减少模板中的计算逻辑，进行数据缓存，提高性能。

更强大的属性声明方式，可以对定义的属性进行逻辑处理和数据监视 。逻辑处理就是在计算属性内可以执行一些自己写的逻辑，数据监视就是计算属性内的返回值是依赖其他属性的变化而变化。

计算属性和方法的区别：在每一次调用方法时都要重新计算，而计算属性不用，在使用计算属性时不需要加（），而调用方法时需要加（），具体可以看代码中的例子，计算属性时依赖其他属性的，当其他属性变化时才会触发，然后 以函数的方式return结果；

效果图：

 

 

 

<template>
   <div class="">
    <label for="tex1" >初始的str1为:</label> <!-- 注意lable标签是不换行的，for元素相当于是为了绑定服务对象 -->
     <input id="tex1" type="text" v-model="str1"><br>
     <br>
      <div style="color:red">
         大写后的str1为:{{str2}}<br>
      </div>
      <br>
      <label for="text2">初始化的msg为:</label>
      <input id="text2" type="text" v-model="msg"><br>
      <br>
      <div style="color:red">
        反转后的msg为：{{msg1}}<br>
      </div><br>
        <label for="nom">初始化之前的num1：</label>
        <input type="text" v-model="num1"><br>
        <div style="color:#F56C6C">
            计算属性后：{{num2}}
        </div>

   </div>
</template>

<script>
export default {
  name: '',

  data () {
    return {
      str1: '',
      msg: '',
      num1: 0
    }
  },
  computed: {
    str2: function () {
      return this.str1.toUpperCase()
    },
    msg1 () {
      return this.msg.split('').reverse().join('')
    },
    num2: {
      get () {
        return parseInt(this.num1) + 10
      },
      set (value) {
        this.num1 = value
      }
    }
  }

}
</script>

<style>
</style>