vuejs之v-on

西西嘛呦

发布于 2020-08-26 15:55:45

5890

发布于 2020-08-26 15:55:45

一、看一个例子：

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

效果：