11-vue语法 计算属性computed

[computed就是一个data中的值]

把需要计算的值放到computed中来，因为他虽然叫计算属性，但是是一个方法，data中就是写死的，所以用来定义变量

也可以写在methods中，但是在methods中就是方法了，在插值表达式中写就要带小括号了，而计算属性他是属性，写的时候不用带括号

他们的区别是在methods中的方法每次运行都会计算一次，而computed中的方法是直接调用缓存的结果，如果计算量大，例如重复计算十次，computed比较划算

<template>
  <view>
    <input type="text" v-model="title">
    <view class="">原标题：{{title}}</view>
    <view class="">修改后的标题：{{}}</view>
    
    <view class="">{{demo}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return { 
        
      }
    },
    methods:{
     
    },
    computed:{
      demo(){
        return "uniapp"
      }
    }
  }
</script>

<style lang="scss">
  input, textarea{
    border: 1px solid #eee;
  }
  .row {
    padding: 20rpx 0;
  }
</style>

把computed中的值返回出来，然后在标签中用插值表达式就可以直接拿到，实际上和data是一样的

[小案例，在输入框中输入字母，转换成大写]

<template>
  <view>
    <input type="text" v-model="title">
    <view class="">原标题：{{title}}</view>
    <view class="">修改后的标题：{{changeTitle}}</view>
    
    <view class="">{{demo}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return { 
        title:""
      }
    },
    methods:{
     
    },
    computed:{
      demo(){
        return "uniapp"
      },
      changeTitle(){
        return this.title.toUpperCase()
      }
    }
  }
</script>

<style lang="scss">
  input, textarea{
    border: 1px solid #eee;
  }
  .row {
    padding: 20rpx 0;
  }
</style>

将方法名作为属性值写到插值表达式中，就可以得到运算过后的新的大写字母