Npcink Blog
切换菜单

methods 方法 - Vue3 新手基础教程

最后更新于
本页目录5 节

我们可以使用 methods 属性给 Vue 定义方法，methods 的基本语法：

const App = {
    methods:{
        // 在此时定义方法，方法之间使用逗号分隔
        //方法名:function(){}
}
}
        const app = Vue.createApp(App);
        app.mount("#app");

演示

例如在 methods 中定义一个名为 show 的方法：

methods:{
  show: function(){
    console.log("显示内容")
  }
}

在方法中访问属性

在 methods 方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问。

例如我们在 show 方法中，访问 number 属性，可以直接通过 this.number 形式访问，其中 this 表示的就是 Vue 实例对象：

    <script>
        const App = {
            data() {
                return {
                    number: 100
                }
            },
            methods: {
                show: function () {
                    console.log(this.number);
                }
            }
        }
        const app = Vue.createApp(App);
        app.mount("#app");
    </script>

如果是在 Vue 构造函数外部，可以使用 …… 来访问 data 中的数据。

实战

目标：点击按钮修改用户名

    <script src="https://unpkg.com/vue@next"></script>
    <div id="app">
        <p>{{message}}</p>
        <button @click="change">点我改名</button>
    </div>


    <script>
        const App = {
            data() {
                return {
                    message: "小飞侠"
                }
            },
            methods: {
                change() {
                    this.message = "水星仔"  // 改变data中属性的值
                }
            }


        }
        const app = Vue.createApp(App);
        app.mount("#app");
    </script>

浏览器渲染

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<script src="https://unpkg.com/vue@next"></script>
    <div id="app">
        <p>{{message}}</p>
        <button @click="change">点我改名</button>
    </div>


    <script>
        const App = {
            data() {
                return {
                    message: "小飞侠"
                }
            },
            methods: {
                change() {
                    this.message = "水星仔"  // 改变data中属性的值
                }
            }


        }
        const app = Vue.createApp(App);
        app.mount("#app");
    </script>

按钮只在第一次点击有效。

computed（计算属性）PK methods（方法）

  • 计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算
  • 方法调用总是会在重渲染发生时再次执行函数
  • 怎么选？如果你确定不需要缓存，那么也可以使用方法调用。

参考文档：