Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue 'computed' Option


Example

Using a computed property inside the computed option to show the appropriate button text.

export default {
  data() {
    return {
      msg: 'Hello World!',
      showMsg: false
    };
  },
  computed: {
    btnText() {
      if( this.showMsg ) {
        return 'Hide'
      }
      else {
        return 'Show'
      }
    }
  }
};
Run Example »

Definition and Usage

The computed option is an object with all the computed properties that are declared on the Vue instance.

Computed properties are usually read-only (see the example above), but it is possible to define a computed property as an object with both a get and a set function, which means that the computed property can also be written to.

Note: Arrow functions should be avoided when declaring computed properties because the Vue instance cannot be reached from inside such a function using the this keyword.


Related Pages

Vue Tutorial: Vue Computed Properties

Vue Tutorial: Vue v-on Directive