vue常用指令(v-on传递参数和事件修饰符)

1、传 递 自 定 义 参 数 : 函 数 调 用 传 参

  1. 代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <input type="button" value="显示传参" @click="showParam('传入参数')" />
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {},
          methods: {
            showParam: function (var1) {
              console.log("参数:" + var1);
            },
          },
        });
      </script>
    </html>
    
    
  2. 测试结果:

    vue常用指令(v-on传递参数和事件修饰符)_第1张图片

2、事 件 修 饰 符: 对 事 件 触 发 的 方 式 进 行 限 制

  1. 修改代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <!-- 按钮传参 -->
          <!-- <input type="button" value="显示传参" @click="showParam('传入参数')" /> -->
    
          <!-- 事件的后面跟上 .修饰符 可以对事件进行限制 -->
          <input type="text" @keyup.enter="test" />
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {},
          methods: {
            showParam: function (var1) {
              console.log("参数:" + var1);
            },
            test: function () {
              alert("事件修饰符导致的事件触发!");
            },
          },
        });
      </script>
    </html>
    
    
  2. 测试结果

    输入框内输入内容,按下回车键触发事件的发生。

vue常用指令(v-on传递参数和事件修饰符)_第2张图片

你可能感兴趣的:(vue,vue.js,javascript,前端)