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

柔光的暖阳◎ 2022-01-21 10:57 378阅读 0赞

上一篇文章中介绍的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>

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

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

![2018111718160012.jpg][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70][]

[2018111718160012.jpg]: https://img-blog.csdnimg.cn/2018111718160012.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70]: /images/20220121/317936388b244b8982446dcfa60e3d6c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，378人围观）

还没有评论，来说两句吧...

相关阅读

相关 springcloud学习之feign声明式服务调用

eign是springcloud的一种服务调用机制，感觉与dubbo很相似，feign封装之后不像一次HTTP请求更像是方法之间的调用。简单使用： 1、导入相关依赖...

￡神魔★判官ぃ/ 2024年04月18日 13:38/ 0 赞/ 45 阅读

相关 vue页面中传参的方法

析，以删除（调用方法removeById）和修改提交（调用方法updateById）为例： ![20190823102611262.png][]（数据）方法一： ...

水深无声/ 2024年04月17日 05:39/ 0 赞/ 42 阅读

相关 Vue项目中一个页面调用另一个页面里的方法实现

在调用方法页面和被调用方法页面同时引入中间js，通过中间js来进行方法调用新建一个中间js命名为MiddleUtil.js 中间JS代码： import Vu

Dear 丶/ 2024年04月01日 08:56/ 0 赞/ 17 阅读

相关 VUE中父子页面传值，子页面调用父页面方法

实现步骤： 1. 新建两个页面，一个父一个子 2. 父页面引入子页面 3. 父页面添加子页面标签 4. 子页面default中定义props即可使用父页面传过来的

向右看齐/ 2022年12月27日 07:21/ 0 赞/ 796 阅读

相关 java中的声明函数_Java中的函数（方法）声明和调用

目前学习了有无返回值和有无参数的函数。其次就是函数的调用，需要参数的函数在调用时应该传入参数，参数的类型和数量应和声明是一样。返回值主要是在函数执行完后返回一个数据。

墨蓝/ 2022年11月06日 13:53/ 0 赞/ 159 阅读

相关 JavaScript方法声明和调用的问题

以下代码可以正确执行，因为声明的是一个方法，调用方法可以放在方法声明的前面： <script> f(); //不会报错，回去后面查找函数

「爱情、让人受尽委屈。」/ 2022年08月20日 15:15/ 0 赞/ 116 阅读

相关 html页面中iframe嵌套页面的父页面和子页面js方法互相调用

我们在写html页面或者说是jsp页面是，有时候需要在一个页面中使用iframe标签嵌套另一个页面，而两个页面有些数据需要交互，这个时候就会用到js技术，互相调用方法，当我

﹏ヽ暗。殇╰゛Y/ 2022年06月09日 03:18/ 0 赞/ 519 阅读

相关 Struts2学习笔记（二）之——Action方法调用（通配符方法和动态方法）

官方不建议用动态方法，更不安全 -------------------- 1.通配符方法调用Action方法 jsp页面： ![70][] struts.x

r囧r小猫/ 2022年05月15日 01:57/ 0 赞/ 154 阅读

相关 iframe 中子页面调用父页面的Vue方法并正确传参

父页面的代码 html <div id="app"> //省略业务代码x行..... <iframe src="/sonpage" >

太过爱你忘了你带给我的痛/ 2022年01月31日 00:45/ 0 赞/ 882 阅读

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

上一篇文章中介绍的vue页面Hi.vue文件中介绍了变量的声明和调用，本文介绍方法的声明和调用。修改Hi.vue文件script部分的内容，声明方法showMessage：

柔光的暖阳◎/ 2022年01月21日 10:57/ 0 赞/ 379 阅读