4、Vue的方法

1.methods方法

  • 可以通过{{方法名（）}}来调用相应的方法

示例代码

示例代码.png

运行结果

运行结果.png

  • 既然是方法，就可以通过传值来满足不同的需求


    示例代码1.png
运行结果.png

  • 如果在当前对象中拿data中的属性，直接对象.name就可以了


    示例代码.png
运行结果.png

2. v-on指令调用方法

  • 采用v-on指令实现点击按钮有弹窗的功能


    示例代码.png

  • 采用v-on指令实现点击按钮隐藏或显示的功能


    示例代码.png

  • 采用v-on指令实现关注与取消关注的功能


    示例代码.png

  • 年龄加减的练习


    示例代码.png

注：

  • @click相当于v-on:click
  • v-on:click单击
  • v-on:dblclick双击
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,548评论 1赞 11
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,772评论 1赞 45
  • 面试题
    Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,148评论 1赞 32
  • Vue现代化使用方法(二)
    vue概述 在官方文档中，有一句话对Vue的定位说的很明确：Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,276评论 0赞 25
  • 我眼中的秃鹤
    贺斯喆 秃鹤，原名陆鹤。是油麻地小学的一名小学生，因为是个十足的小秃子，同学们都叫他秃鹤，在他之前，从来都没有觉得...
    金盏菊2017阅读 1,042评论 0赞 1