vue computed 计算属性

红孩儿2011

于 2019-12-23 17:55:15 发布

阅读量65

点赞数

本文链接：https://blog.youkuaiyun.com/qq_26642611/article/details/103670865

版权

本文深入探讨Vue中的计算属性，包括其基本用法和如何在模板中实现数据的组合展示。同时，介绍了如何利用计算属性与Vuex结合实现状态管理，以及在双向绑定中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性的使用

<template>
  <div id="app">
    <p>{{name}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: 'Fin',
      lastName: 'Get',
    };
  },
  computed: {
    name() {
      return `${this.firstName}${this.lastName}`
    }
  }
}
</script>

双向绑定的计算属性与Vuex

// vuex state是无法直接修改的，官方给出了 v-model 的解决方案
<input v-model="message">

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

如果在方法或者生命周期中使用了计算属性，则必须设置一个set