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进行修改，内容会同步更新。

来源：https://www.cnblogs.com/xiximayou/p/12315909.html

标签

vue

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!