Vue v-on,vue $on事件使用方法
本文主要介绍了vue中的v-on参数，具有很好的参考价值。希望对你有帮助。来和边肖一起看看吧。
vue中v-on:clock的使用
最近在学习vue.js框架。把遇到的一些问题写下来，以便以后查阅。
首先，这是一个页面(为了便于观察，将每个标签逐一涂上颜色):
其中html代码：
div class=groupbody
ul class=list
Li v-for= cell in todo . group body class= pagegroupcell v-on:click= exchange($ event)
div class= pagecelltext“{ cell . left } }/div
div class= pagecellmin { { cell . min } }/div
img src= img/images/direction/right . png style= width:20px；高度：30px浮动：对；上边距：5px
div class= pagecellmsg { { cell . right } }/div
/李
/ul
div class=clear /div
/div
js零件代码：
交换：函数(事件){
Alert(“开始执行方法”)；
var a=event.target
var cellimg=a . getelementsbytagname( div )[0]；
var msg=cellimg.innerText
page 2 data as . todos[0]。groupheader=msg
Alert(“执行中的方法”)；
var b=document . getelementbyid( page 1 )；
b . style . display= none ；
var c=document . getelementbyid( page 2 )；
c . style . display= block ；
Alert(“方法执行结束”)；
}
此时，如果你点击单元格中的彩色区域(即当你点击李标签的文字标签时)，只会执行第一个alert()方法，后两个方法都不会执行。
原因就是这个方法的参数event：
如果标签绑定的方法中有一个参数$event，那么可以使用event.target来获取绑定到当前点的点击事件的标签。
但是，该参数也可能导致一些问题。例如，如果无论单击li选项卡的哪个部分都要完成click事件方法，则参数event不适用。这个时候只能想别的办法了。
解决方法：
在li中有一个v-for循环，其中有一个cell对象，它驻留在户主li标签中的数据中。你只需要把这个对象传递给click事件方法，就可以通过这个对象达到你刚刚想要达到的目的。
修改后的html代码：
div class=groupbody
ul class=list
Li v-for= cell in todo . group body class= pagegroupcell v-on:click= exchange(cell)
div class= pagecelltext“{ cell . left } }/div
div class= pagecellmin { { cell . min } }/div
img src= img/images/direction/right . png style= width:20px；高度：30px浮动：对；上边距：5px
div class= pagecellmsg { { cell . right } }/div
/李
/ul
div class=clear /div
/div
修改后的js代码：
交换：函数(单元格){
Alert(“开始执行方法”)；
page 2 data as . todos[0]。groupheader=cell.left
警报(“进行中”)；
var b=document . getelementbyid( page 1 )；
b . style . display= none ；
var c=document . getelementbyid( page 2 )；
c . style . display= block ；
Alert(“方法执行结束”)；
}
此时，整个触电事件的执行方法可以完整执行，后续页面的切换也可以完成。
补充：Vue中关于v-on绑定点击事件时候的参数问题
当v-on binding click事件发生时，参数有三种情况，如下所示：
绑定的方法后面没有括号
Button @click=btnClick 单击/button
脚本
const app=new Vue({
方法：{
btnClick(事件){
//此时，事件就是当前点击的对象。
console.log(事件)
}
}
})
/脚本
绑定的方法后面有括号
Button @click=btnClick()单击/按钮
脚本
const app=new Vue({
方法：{
btnClick(事件){
//此时，事件未定义
console.log(事件)
}
}
})
/脚本
绑定的方法后面有括号，需要传递参数
Button @click=btnClick(123)单击/按钮
脚本
const app=new Vue({
方法：{
btnClick(事件){
//此时事件是123
console.log(事件)
}
}
})
/脚本
绑定的方法后面有括号，需要传递参数，并且需要当前点击的对象
！-在这种情况下，如果需要传递当前单击的对象，参数必须是$ event-
！-如果要在第一个位置传递一个数字，不需要引用。如果你要传递一个字符串，必须要加引号，因为如果不加引号，Vue会被解析为变量。此时，如果它没有在数据中定义，您将报告一个错误-
Button @ click= btnclick (123，$ event) Click /button
脚本
const app=new Vue({
方法：{
btnClick(数量，事件){
//此时num为123，event为当前点击的对象，
console.log(数量，事件)
}
}
})
/脚本
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。如有错误或不足之处，请不吝赐教。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。