欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue教程(三)click 事件

程序员文章站 2022-05-15 13:48:44
...

Vue教程(三)click 事件

click 事件属性

  1. 新的属性: methods,该属性用于在 Vue 对象中定义方法。
  2. 新的指令:@cick,该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法方法通常是 methods 中定义的方法)

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>03_click</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h3>click事件</h3>
    <span>vue实现计数器</span>

    <div id="app">
      <h3>当前计数:{{counter}}</h3>
      <button v-on:click="add">+</button>
      <button v-on:click="sub">-</button>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          counter: 0,
        },
        methods: {
          add: function () {
            this.counter++;
          },
          sub: function () {
            this.counter--;
          },
        },
      });
    </script>
  </body>
</html>

    – 以上为《Vue教程(三)click 事件》,如有不当之处请指出,我后续逐步完善更正,大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

相关标签: # Vue教程