v-on可以简写为@，所以以下所有示例都以简写为主
例一：最简单的点击后打印结果事件
<template> <div> <span @click="clickbtn" style="cursor:pointer;">事件处理</span> </div> </template> <script> export default{ name:"vontest", methods:{ clickbtn(){ console.log("点击后打印出的事件处理") } } } </script> <style> </style>例二：打印一个数组的结果
<template> <div> <span @click="clickbtn" style="cursor:pointer;">事件处理</span> </div> </template> <script> export default{ name:"vontest", data(){ return{ dataarr:["数据一","数据二","数据三"] } }, methods:{ clickbtn(){ console.log(this.dataarr) } } } </script> <style> </style>这里的this指的是当前的vue组件，所以打印处的就是当前vue下的data里面的数组dataarr的值
例三：通过点击事件向数组中添加新数据
<template> <div> <span @click="clickbtn" style="cursor:pointer;">事件处理</span> </div> </template> <script> export default{ name:"vontest", data(){ return{ dataarr:["数据一","数据二","数据三"] } }, methods:{ clickbtn(){ this.dataarr.push("数据四") console.log(this.dataarr) } } } </script> <style> </style> 知识点补充：push() push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度 也就是说使用push后，会直接改变原数组的内容 知识点补充unshift() unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度 也就是说使用unshift后，会直接改变原数组的内容unshift()示例如下
<template> <div> <span @click="clickbtn" style="cursor:pointer;">事件处理</span> </div> </template> <script> export default{ name:"vontest", data(){ return{ dataarr:["数据一","数据二","数据三"] } }, methods:{ clickbtn(){ this.dataarr.unshift("数据四","数组五") console.log(this.dataarr) } } } </script> <style> </style>例四：通过点击事件实现元素的隐藏和显示
<template> <div> <span @click="clickbtn" style="cursor:pointer;">事件处理</span> <p v-if="seeme">能不能看到我</p> </div> </template> <script> export default{ name:"vontest", data(){ return{ seeme:true } }, methods:{ clickbtn(){ this.seeme = !this.seeme } } } </script> <style> </style>知识点补充：简单布尔值判断的简写形式 以上面代码为例
this.seeme = !this.seeme 这段代码是if判断的简写形式 seeme默认为true，dom中的p标签默认显示 通过点击事件后，this.seeme被赋值为!this.seeme，而!this.seeme的值为false，所以p标签就会消失 反之，当this.seeme为false后，!this.seeme就是true 所以以此代码就可实现最简单的显示和隐藏的切换功能