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 $data Object


Example

Using the $data object to change the color of a <div> element when it is clicked.

export default {
  data() {
    return {
      color: 'lightgreen'
    }
  },
  methods: {
    changeColor() {
      this.$data.color = 'pink';
    }
  }
}
Run Example »

See more examples below.


Definition and Usage

The $data object represents all the properties stored in the data part of the Vue instance.

In the example above, the color property is referred to with this.$data.color, but we can refer to the same property by just writing this.color and that is more common.

The $data object is used when we need to explicitly state that we are referring to a property in the data part of the Vue instance.

We must use the $data object if we want to refer to a data property with a name starting with "_" or "$", because in such cases the this prefix alone will not work.


More Examples

Example

Using the $data object to change the color of a <div> element every time it is clicked.

<div 
  v-on:click="$data.color+=100"
  v-bind:style="{backgroundColor:'hsl('+$data.color+',80%,80%)'}"
>
  <p>Click here</p>
</div>
Run Example »

Related Pages

Vue Tutorial: Vue v-on Directive

Vue Tutorial: Vue v-bind Directive

Vue Tutorial: Vue Methods