VUE的computed计算属性——数组的反转、格式的修改、 数组的截取、VUEX获取state

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/HarryHY/article/details/102385376

定义

类型:{ [key: string]: Function | { get: Function, set: Function } }

详细:

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。

computed: {
  aDouble: vm => vm.a * 2
}

计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。

主要是不污染源数据的情况下我们进行的一系列操作

从VUEX获取state

  computed: {
    ...mapState(["friendusersname", "room_id"])
  },

数组的反转——应用

  computed: {
      newdataList:function(){
          return this.dataList.reverse()
      },
  }
<li class="content_li" v-for="(item,index) in newdataList" :key="item.id">
</li>

格式的修改

  computed: {
      newprize:function(){
          return `${this.prize}金币`
      },
  }

为什么要用这个格式修改而不使用{{}}插值呢?
主要还是提升用户体验

<span v-text="newprize"></span>

数组的截取

  computed: {
    NewuserArray: function() {
      return this.userArray.slice(0, 3);
    }
  }
      <div v-for="(item,index) in NewuserArray" :key="item.username + index" class="Avatar">
      </div>

猜你喜欢

转载自blog.csdn.net/HarryHY/article/details/102385376