聊聊vue 中的v-on参数问题


Posted in Vue.js onJanuary 29, 2021

vue中v-on:clock的使用

最近在学习vue.js框架。记下其中遇到的一些问题,以便以后查阅。

首先,这是一个页面(为了便于观察,将各个标签都一一着色):

聊聊vue 中的v-on参数问题

其中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="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg ">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear "></div>
</div>

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="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg ">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear "></div>
</div>

修改之后的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>

聊聊vue 中的v-on参数问题

绑定的方法后面有括号

<button @click="btnClick()">点击</button>
<script>
 const app = new Vue({
 methods:{
  btnClick(event){
  // 此时event是undefined
  console.log(event)
  }
 }
 })
</script>

聊聊vue 中的v-on参数问题

绑定的方法后面有括号,需要传递参数

<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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。如有错误或未考虑完全的地方,望不吝赐教。

Vue.js 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 #Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 #Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 #Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 #Vue.js
vue穿梭框实现上下移动
Jan 29 #Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Vue ​v-model相关知识总结
Jan 28 #Vue.js
You might like
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
如何做好总经理助理
2013/11/12 职场文书
九年级家长会邀请函
2014/01/15 职场文书
大课间活动实施方案
2014/03/06 职场文书
春节请假条
2014/04/11 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Python实现双向链表基本操作
2022/05/25 Python