vuejs之v-on

时间:2022-07-23
本文章向大家介绍vuejs之v-on,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一、看一个例子:

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="事件绑定" v-on:click="doIt">
    <input type="button" value="v-on简写" @click="doIt">
    <input type="button" value="双击事件" @dblclick="doIt">
    <h2 @click="changeFood">{{food}}</h2>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        food: '西红柿炒鸡蛋'
      },
      methods: {
        doIt: function () {
          //逻辑
          alert("做it");
        },
        changeFood: function () {
          this.food += "好好吃"
        }
      },
    })
  </script>
</body>

</html>

结果:

点击事件绑定或者v-on简写或者双击事件,会:

点击西红柿炒鸡蛋:

说明:v-on可以为标签绑定事件,语法:v-on:事件名="方法名" ,可以使用@事件名="方法名"进行简写。改变标签里的内容可以利用this进行修改,内容会同步更新。

二、使用带参数的函数和事件修饰符

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="按钮" @click="doIt(1,2)">
    <input type="text" @keyup.enter="sayHi">
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        arr: ['mike', 'bob', 'tom', 'jack'],
        arr2: [{ color: 'red' }, { color: 'blue' }, { color: 'yellow' }],
      },
      methods: {
        doIt: function (p1, p2) {
          alert(p1 + p2);
        },
        sayHi: function () {
          alert("你好啊");
        },
      },

    })
  </script>
</body>

</html>

效果:

点击按钮:

说明:在html标签中使用v-on时,参数保持一致即可。

在输入框中随便输入什么,按下回车键:

说明:v-on还可以使用各种各样的事件,具体可参考文档。