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>

结果:

vuejs之v-on_第1张图片

 

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

vuejs之v-on_第2张图片

 

点击西红柿炒鸡蛋:

vuejs之v-on_第3张图片

说明: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>

效果:

点击按钮:

vuejs之v-on_第4张图片

 

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

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

vuejs之v-on_第5张图片

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

你可能感兴趣的:(vuejs之v-on)