vue学习之二 页面中方法的声明和调用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/bowei026/article/details/91358279

上一篇文章中介绍的vue页面Hi.vue文件中介绍了变量的声明和调用，本文介绍方法的声明和调用。

修改Hi.vue文件script部分的内容，声明方法showMessage：

<script>
export default {
  data () {
    return {
      message: 'hi, 我的第一个vue程序'
    }
  },
  method: {
    showMessage: function(name) {
      alert('hi, ' + name);
    }
  }
}
</script>

修改Hi.vue文件template部分的内容，调用方法showMessage：

<template>
  <div class='hi' @click="showMessage('Tom')">
    {{message}}
  </div>
</template>

对应事件处理， @click 也可以用 v-on: 代替，如

<template>
  <div class='hi' v-on:click="showMessage('Tom')">
    {{message}}
  </div>
</template>

运行程序，点击页面的文本，会弹出提示。

本文内容到此结束，更多内容可关注公众号和个人微信号：