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双击