SoFunction
Updated on 2025-04-04

Detailed explanation of Vue's methods and attribute cases

Methods and properties of vue

1. Method methods

Usage 1

methods:{
Method name: function(){},
}

Usage 2

methods:{
Method name (){}
}

Notice

{{}} call to write ()

Example

{{aa()}}

Event trigger

@click=aa" can have () or no parameters if you need to pass them, plus ()
Passing the special parameter $event in to get the event object

2. Calculate properties

What are the calculation attributes

computed

Characteristics of Computational Properties

  1. Computation attributes have cache
  2. Computed properties are cached based on their dependencies
  3. Computation attributes will only be re-evaluated when their related dependencies change.
  4. When the attributes depend on the calculation attribute change, it will recalculate it once.

Methods in Computing Properties

set(da)
get()

Example

 	computed:{
                 //Calculate properties                 //The calculation attribute has a cache                 //Directly call {{}} without writing ()                 // When the attributes depend on the calculation attribute change, it will recalculate it once
                 bb(){
                    return (a=>() > -1)
                 },
                 cc:{
                     //The get method is automatically triggered when calling the computed attribute, and the set method is automatically triggered when modifying the computed attribute.                     set(a){
                        ('I'm set'+"Received Content"+a+"Received Content")
                     },
                     get(){
                        ('I'm get')
                        return (a=>() > -1)

                     }
                 }
            },

This is the end of this article about the detailed explanation of Vue's methods and attribute cases. For more related Vue's methods and attribute content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!