vuejs之v-on

发布时间：2020-12-16 23:03:18 所属栏目：百科来源：网络整理

导读：一、看一个例子： html head script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / script / body div id ="app" input type ="button" value ="事件绑定" v-on:click ="doIt" ="v-on简写" @click ="双击事件" @dblclick h2 @click ="changeFood"

一、看一个例子：

<html>

head>
  script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</bodydiv id="app">
    input type="button" value="事件绑定" v-on:click="doIt"="v-on简写" @click="双击事件" @dblclickh2 @click="changeFood">{{food}}h2div>
    var app = new Vue({
      el: '#app',data: {
        food: '西红柿炒鸡蛋'
      },methods: {
        doIt: function () {
          //逻辑
          alert("做it");
        },changeFood: function () {
          this.food += "好好吃"
        }
      },})
  >

结果：

点击事件绑定或者v-on简写或者双击事件，会：?

点击西红柿炒鸡蛋：

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

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

="按钮"="doIt(1,2)"="text" @keyup.enter="sayHi">

效果：

点击按钮：

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

在输入框中随便输入什么，按下回车键：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!