事件监听:
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
html
<div> <button v-on:click="num+=1">按钮</button> <p>{{num}}</p> </div>
js
data() { return { num: 1, } }
点击前点击后每点击一次就增加一次
然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on
指令中是不可行的。因此 v-on
还可以接收一个需要调用的方法名称。
methods方法
html:
<div> <button v-on:click="handlerClick">按钮1</button> </div>
js
data() { return { show: false, } }, methods: { handlerClick() { console.log(this);//this指向当前组件 //this来索引当前data中的数据 this.show = !this.show; } }
点击按钮1后在浏览器控制台可以看到相关数据
事件参数:
<template> <!--在template,只能存在一个根组件--> <div class="event"> <ul> <li v-on:click="getItemInfo(index,$event)" v-for="(name,index) in names">{{name}}</li>//v-on:click可简写@click </ul> </div> </template> <script> export default { data(){ return{ names:["iwen","ime","ice"] } }, methods:{ //事件中默认参数event getItemInfo(data,event){ console.log(this.names[data]); console.log(event); } } } </script> <style> </style>
效果图: