Vue.js 方法

Vue方法是与 Vue 实例关联的对象。函数在方法对象中定义。当您需要使用v-on指令对元素执行某些操作以处理事件时，方法很有用。可以进一步调用方法对象内定义的函数来执行操作。

句法：

methods : {
  // We can add our functions here
}

单个文件组件的语法：

export default {
  methods: {
    // We can add our functions here
  }
}

在以下示例中，我们使用 Vue.js 来展示方法的工作原理。

示例 1：

HTML

 

     
    

 

 
    
 
         
        {{title}}
        Title : {{name}}
        Topic : {{topic}}
        
        {{show()}}
 
    
 


 
    // Creating Vue Instance
    var  vm = new Vue({
 
        // Assigning id of DOM in parameter
        el: '#home',
        // Assigning values of parameter
        data: {
            title : "Geeks for Geeks",
            name  : "Vue.js",
            topic : "Instances"
        },
 
        // Creating methods
        methods : {
 
            // Creating function
            show: function(){
                return "Welcome to this tutorial on "
                    + this.name + " - " + this.topic;
            }
        }
    });

   

输出：

Vue 应用程序

示例 2：

HTML

 

    
    

 

    
 
        
        {{title}}
        Title : {{name}}
 
        
        Click me
        
    

 

 
    // Creating Vue Instance
    var  vm = new Vue({
 
        // Assigning id of DOM in parameter
        el: '#home',
 
        // Assigning values of parameter
        data: {
            title : "Geeks for Geeks",
            name  : "Vue.js | Methods",
        },
 
        // Creating methods
        methods : {
 
            // Creating function
            show: function(){
                    // Setting text in element
                    document.getElementById("view")
                      .innerHTML = "Hi, This is Vue"
 
                    // Hiding text after 2 seconds
                    setTimeout(() => {
                        document.getElementById("view")
                           .innerHTML = ""
                    }, 2000);
                }
            }
    });

 

输出：

• 在点击按钮之前：
  

点击前

• 点击按钮后：
  

点击后