快活林资源网 Design By www.csstdc.com
vue中v-on:clock的使用
最近在学习vue.js框架。记下其中遇到的一些问题,以便以后查阅。
首先,这是一个页面(为了便于观察,将各个标签都一一着色):
其中html代码:
<div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange($event)"> <div class="pagecelltext ">{{ cell.left }}</div> <div class="pagecellmin">{{ cell.min }}</div> <img src="/UploadFiles/2021-04-02/right.png">js部分的代码:
exchange: function (event) { alert("开始执行方法"); var a = event.target; var cellimg = a.getElementsByTagName("div")[0]; var msg = cellimg.innerText; page2datas.todos[0].groupheader = msg; alert("方法执行中"); var b = document.getElementById("page1"); b.style.display = "none"; var c = document.getElementById("page2"); c.style.display = "block"; alert("方法执行结束"); }这时候如果点击cell中有颜色的区域(即点击li标签的字标签的时候),只有第一个alert( )方法执行,而后面的两个方法并不执行。
原因就是这个方法的参数event:
如果标签绑定的方法中有参数$event,这时候就可以利用event.target,获取到当前点被绑定这个点击事件的标签。
但是这个参数也可能会造成一些问题,比如如果想不论点击li标签的哪一个部分都要把点击事件的方法执行完整,这时候参数event就不适用了。这时候只能另想其他办法。
解决方法:
在li中有v-for循环,其中有一个cell对象,这个对象居居士li标签中的数据。只需要把这个对象传递给点击事件的方法,就可以通过这个对象去实现刚才想要达到的目的。
修改之后的html代码:
<div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange(cell)"> <div class="pagecelltext ">{{ cell.left }}</div> <div class="pagecellmin">{{ cell.min }}</div> <img src="/UploadFiles/2021-04-02/right.png">修改之后的js代码:
exchange: function (cell) { alert("开始执行方法"); page2datas.todos[0].groupheader =cell.left; alert("执行中"); var b = document.getElementById("page1"); b.style.display = "none"; var c = document.getElementById("page2"); c.style.display = "block"; alert("方法执行结束"); }这时候,整个电击事件的执行方法都可以完整执行下来,后续页面的切换也可以完成。
补充:Vue中关于v-on绑定点击事件时候的参数问题
v-on的绑定点击事件的时候关于参数有三种情况,分别如下 :
绑定的方法后面没有括号
<button @click="btnClick">点击</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此时event就是当前点击的对象 console.log(event) } } }) </script>绑定的方法后面有括号
<button @click="btnClick()">点击</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此时event是undefined console.log(event) } } }) </script>绑定的方法后面有括号,需要传递参数
<button @click="btnClick(123)">点击</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此时event是123 console.log(event) } } }) </script>绑定的方法后面有括号,需要传递参数,并且需要当前点击的对象
<!-- 这种情况下,如果需要传递当前点击的对象,参数必须是$event --> <!-- 第一个位置如果要传数字的话,就不需要加引号,如果要传一个字符串的话,就必须要加引号,因为如果不加引号,Vue就会当做一个变量来解析,此时如果在data中没有定义的话,就会报错 --> <button @click="btnClick(123,$event)">点击</button> <script> const app = new Vue({ methods:{ btnClick(num,event){ // 此时num是123,event是当前点击的对象, console.log(num,event) } } }) </script>以上为个人经验,希望能给大家一个参考,也希望大家多多支持。如有错误或未考虑完全的地方,望不吝赐教。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- 【佛之吧沙发】VA-BuddhaBar-BestOf2byRavin(FLAC)
- [ABC唱片]-《雪莉—蓝》[SACD-008][SACD][WAV+CUE]
- 黎瑞恩.2002-理想的日子精选2CD【环球】【WAV+CUE】
- 【驰放沙发(J)】VA-2024-WinterTime,Vol.12(FLAC)
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 韩红《青藏高原+红+韩红精选集》3CD[WAV分轨][1.7G]
- 高胜美《经典金选》1991-1994 4CD[WAV整轨][1.9G]
- 【迷幻电音】AstralWaves-2023-Singles,RemixesandRaritiesII(FLAC)
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- 张国荣.2011-极品天碟LPCD45II(雨果版)【环球】【WAV+CUE】
- 张学友《醒着做梦》[DFF][1.1G]
- 刘惜君 《如我》[WAV分轨][403M]
- 白玛多吉《梦》限量1:1母盘直刻[低速原抓WAV+CUE][508M]
- 魏金栋-金歌新曲-梦里全是桂花香2CD[天凡之音][WAV+CUE]
- 鲛岛有美子-樱花赋HQCD[天龙][WAV+CUE]