最近项目中要为一个循环列表动态传送当前点击列的数据,查了很久资料也没有一个完美的解决方案,

新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案,居然也能解决这个问题,作此记录留待以后会有更好的方法解决这个事情

需求:根据每列传递的参数,决定弹窗后面是积分够了去直接购买还是不够需要去转换

二、页面代码[无法可传的参数,我把它放进了一个自定义标签date-id]

  1. <div class="ticket-main">
  2. <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg weui_media_box_bg" v-for="item in mediaBox" :date-id="item.num" v-on:click="upHref($event)">
  3. <div class="weui_media_hd">
  4. <img class="weui_media_appmsg_thumb" :src="item.mediaBoxImg" alt="" />
  5. </div>
  6. <div class="weui_media_bd">
  7. <h4 class="weui_media_title" v-text="item.name">双色球彩票一注</h4>
  8. <p class="weui_media_desc"><span class="icon icon-2"></span><span v-text="item.price"></span></p>
  9. </div>
  10. </a>
  11. </div>

三、js代码

  1. var secretRecipe = new Vue({
  2. el: "#secret-recipe",
  3. data: {
  4. pointsNum: [],
  5. mediaBox:[]
  6. },
  7. methods:{
  8. upHref:function(e){
  9. hrefSrc(e.currentTarget);
  10. }
  11. }
  12. });
  13. var prize=[
  14. {mediaBoxImg:"../b2b-reception/images/secret/icon_01.png",name:"双色球彩票一注",price:'250',num:"1"},
  15. {mediaBoxImg:"../b2b-reception/images/secret/icon_02.png",name:"50M流量",price:'230',num:"2"},
  16. {mediaBoxImg:"../b2b-reception/images/secret/icon_03.png",name:"景点抽抽乐",price:"300",num:"3"}
  17. ];
  18. $(function(){
  19.  
  20. secretRecipe.mediaBox = prize;
  21.  
  22. })
  23.  
  24. function hrefSrc(v){
  25. console.log($(v).attr("date-id"));
  26. $.modal({
  27. title: "支付方式",
  28. text: "选择你的支付方式",
  29. buttons: [
  30. { text: "转化积分", onClick: function(){ $.alert("你选择了转化积分"); } },
  31. { text: "立即购买", onClick: function(){ $.alert("你选择了立即购买"); } },
  32. { text: "取消", className: "default"},
  33. ]
  34. });
  35. }

重点说明:$event,官方文档中是说该对象【在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event 属性:v-on:click="handle('ok', $event)"。】

handle(e){e.currentTarget}方法接收时取的是点击的该DOM本身

handle(e){e.target}方法接收时取的是点击的该元素

handle(e){e.target.tagName}方法接收时取的是点击的该元素的标签名(如div.p.img)

vue v-on:click传递动态参数的更多相关文章

  1. vue微信分享链接添加动态参数

    微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk npm install --save ...

  2. 微信小程序for循环中传递动态参数

    for循环中的参数,没法传到对应的 js里,所以直接在 wxml页面上跳转 发送参数的 wxml页面 <view class="uploader" wx:for=" ...

  3. 关于Ext4 extraParams 不能传递动态参数的问题解决办法

    可以监听请求发送之前的事件:beforeload ,然后再添加请求的参数 me.store = Ext.create('Ext.data.JsonStore', { remoteSort: true, ...

  4. vue嵌套路由-query传递参数(三)

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...

  5. function(函数)中的动态参数

    我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下:     1.show(*args) def show(*args): print(args,type(arg ...

  6. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  7. vue.js中路由传递参数

    知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数 方法一:使用 <router-link :to="{name:'edithospital',params:{hi ...

  8. Vue.js Ajax动态参数与列表显示

    一.动态参数显示 1.引入js <script type="text/javascript" src="/js/vue.min.js"></s ...

  9. vue嵌套路由--params传递参数

    在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...

随机推荐

  1. linux文件属性之linux文件删除原理

    Linux是通过link的数量来控制文件删除的,只有当一个文件不存在任何link的时候,这个文件才会被删除.一般来说,每个文件都有2个link计数器:i_count和i_nlink. i_count的 ...

  2. 解决iPhone滑动不流畅问题

    前段时间在做一个手机端的页面时遇到了iOS上滑动不流畅的问题,后来才发现安卓上没有问题,才意识到这是兼容性问题引起的,所以遇到问题后快速定位到问题根源非常重要.在网上一搜就找到了解决方案.以后遇到类似 ...

  3. 【php】【异步】php实现异步的几种方法

    请参考  4种php常用的异步执行方式 ajax 和 img 的 src 属性 系统指令调用 (在php代码里面调用系统指令) curl socket通信 ​

  4. Ubuntu系统里的python

    Ubuntu系统里,默认安装python2.7.x版本的python,直接执行python命令,打开的将是python 2.7.x版本:python3版本的需要自行安装,安装成功后,执行python3 ...

  5. Linux学习-X Server 配置文件解析与设定

    X server 的配置 文件都是预设放置在 /etc/X11 目录下,而相关的显示模块或上面提到的总总模块,则主要放置在/usr/lib64/xorg/modules . 比较重要的是字型文件与芯片 ...

  6. python中子进程不支持input()函数输入

    错误的源代码: import socketimport threadingimport multiprocessing# 创建socketserve_socket = socket.socket(so ...

  7. EXCEL宏做数据拆分

    用处:将大容量的EXCEL工作簿分解成若干个小的工作簿 Sub aa() For i = 1 To 8 Set nb = Workbooks.Add nb.SaveAs Filename:=ThisW ...

  8. Python 实战一

    列表ID的显示 起初ID显示的是数据库中的id,因为数据库中的id是自增长的,所以删除一条后,这里显示就叉开了,这里使用索引的方式来显示. 这个功能实现的逻辑: 第一:定义一个表格的架构,用id=‘i ...

  9. 转:Generating PDFs from Web Pages on the Fly with jsPDF

    The Portable Document Format has been one the major innovations in the fields of desktop publishing ...

  10. HSL颜色处理

    H--色调 S--饱和度 L--亮度 HSB(HSL) 色调饱和度亮度模式 以另外一种不同的理念进行色彩的调配 H色调 0~360 圆环形式 以角度表示 S 饱和度 0~1 之间的小数 L 亮度 0~ ...