vue点击事件改变样式（vue点击事件）
一 、Vue中的事件处理
可以用v-on指令监听DOM事件 ，并在触发时运行一些js代码 。
举个简单的例子：实现每次点击按钮counter加1的效果
<div id="app"> <p>{{counter}}</p> <button v-on:click="counter++">点击+1</button></div><script> Vue.config.productionTip = false; new Vue({ el: "#app", data: { counter: 1, }, });</script></body>二 、事件处理方法
许多事件处理逻辑会更复杂 ，所以直接把js代码写在v-on指令中是不可行的 ，因此v-on还可以接收一个需要调用的方法名称 。
实现步骤：
在标签v-on指令后定义方法名
在methods对象中定义方法
示例：
<div id="app"> <p>{{name}}</p> <button v-on:click="showName">显示名称</button></div><script> Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示 。 new Vue({ el: "#app", data: { name: "zhangsan", }, methods: { showName(event) { // this在方法里指向当前Vue实例 console.log(this.name); // event是原生DOM事件 if(event){ console.log(event.target.tagName) } }, }, });</script>内联处理器中的方法
除了直接绑定到一个方法 ，也可以在内联js语句中调用方法
<div id="app"> <button v-on:click="say(hi)">Say hi</button> <button v-on:click="say(what)">Say what</button></div><script>new Vue({ el: #app, methods: { say: function (message) { alert(message) } }})</script>有时也需要在内联语句处理器中访问原始的DOM事件 。可以用特殊变量$event把它传入方法：
<button v-on:click="warn(Form cannot be submitted yet., $event)"> Submit</button><script>new Vue({ el: #app, methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) { event.preventDefault() } alert(message) } }})</script>总结：事件的基本使用
使用v-on:xxx或@xxx绑定事件 ，其中xxx是事件名
事件的回调需要配置在methods对象中 ，最终会在vm上
methods中配置的函数 ，不要用箭头函数！否则this指向的是window对象 ，就不是vm了
methods中配置的函数 ，都是被Vue所管理的函数 ，this的指向是vm或组件实例对象 。在编写事件代理的时候 ，用e.currentTarget引用绑定事件代理的元素 ，e.target引用事件目标元素 。
@click="demo"或@click="demo($event)"效果一致 ，但后者可以传参
【vue框架升级了写法：】
<body> <div> <p>第一种</p> </div> </body> <div> <p>第二种</p> </div> <view> <p>第三种</p> </view> <body> <div id="app"> <button v-on:click="showInfo">点击显示详细信息(不传参)</button> <button @click="showInfo1(1,$event)">点击可传入参数</button> </div> <script> Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示 。 new Vue({ el: "#app", data: { name: "zhangsan", }, methods: { showInfo(e) { console.log(this.name, e.target.innerText); }, showInfo1(number, e) { console.log(number, e.target.innerText); }, }, });</script></body>二 、事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求 。尽管我们可以在方法中轻松实现这点 ，但更好的方式是：方法只有纯粹的数据逻辑 ，而不是去处理DOM事件细节 。
为了解决这个问题 ，Vue.js为v-on提供了事件修饰符 。修饰符是由点开头的指令后缀来表示的 。
.stop
阻止单击事件冒泡（常用）
<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a>.prevent
阻止事件默认行为（常用）
<!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --><form v-on:submit.prevent></form>.once
事件只触发一次（常用）
<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>注：不像其它只能对原生的 DOM 事件起作用的修饰符 ，.once 修饰符还能被用到自定义的组件事件上
.capture
使用事件的捕获模式
<!-- 添加事件监听器时使用事件捕获模式 --><!-- 即内部元素触发的事件先在此处理 ，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis"> 1 <p v-on:click="showInfo">2</p></div><!--当我们点击p标签时 ，会先执行doThis ，再执行showInfo-->.self
只有event.target是当前操作的元素时才能触发事件
<!-- 只有 event.target 是当前操作的元素时才会触发函数 --><!-- 当我们点击p标签的时候 ，不会触发div标签的执行 ，只有点击div才会触发div的执行 --><div v-on:click.self="doThis" id="app"> 1 <p v-on:click="showInfo">2</p> </div> <script> const vm = new Vue({ el: "#app", methods: { doThis() { console.log(1); }, showInfo() { console.log(2); }, }, });</script>使用修饰符时 ，顺序很重要；相应的代码会以同样的顺序产生 。因此 ，用 v-on:click.prevent.self 会阻止所有的点击 ，而 v-on:click.self.prevent 只会阻止对元素自身的点击 。
.passive
事件的默认行为立即执行 ，移动端项目常用
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成 --><div v-on:scroll.passive="onScroll">...</div>三 、按键修饰符
在监听键盘事件时 ，Vue允许为v-on添加按键修饰符
1 、vue中常用的按键别名如下：
.enter
"回车"键
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.showInfo()` --><input v-on:keyup.enter="showInfo">.delete
"删除"和"退格"键
<input v-on:keyup.delete="showInfo">.esc
"退出"键
<input v-on:keyup.esc="showInfo">.space
"空格"键
<input v-on:keyup.space="showInfo">.tab
（特殊）会把按键从当前位置切走 ，必须配合keydown去使用
<input v-on:keydown.tab="showInfo">.up
"上"键
<input v-on:keyup.up="showInfo">.down
"下"键
<input v-on:keyup.down="showInfo">.left
"左"键
<input v-on:keyup.left="showInfo">.right
"右"键
<input v-on:keyup.right="showInfo">2 、Vue未提供别名的按键 ，可以使用按键原始的key值绑定 ，但注意要转为kebab-case（短横线命名）比如：大写锁定键（CapsLock）
<input v-on:keyup.caps-lock="showInfo">3 、系统修饰符（用法特殊）：ctrl 、alt 、shift 、meta
配合keyup使用：按下修饰键的同时 ，再按下其他键 ，随后释放其他键 ，事件才会被触发（比如ctrl ，按下ctrl再按y ，释放y后才会触发事件）
<!-- 此方法按下ctrl再按(x,y,q等)其他键 ，释放其他键后才会触发事件 --><input v-on:keyup.ctrl="showInfo"><!-- 此方法按下ctrl再按y键 ，释放y键后才会触发事件 --><input v-on:keyup.ctrl.y="showInfo"> 配合keydown使用：正常触发事件 。
4 、Vue.config.keyCodes.自定义键名 = 键码 ，可以去定制按键别名（不推荐）
Vue.config.keyCodes.huiche = 13;<input v-on:keyup.huiche="showInfo">创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！