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

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

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

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

<div class="ticket-main">
<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)">
<div class="weui_media_hd">
<img class="weui_media_appmsg_thumb" :src="item.mediaBoxImg" alt="" />
</div>
<div class="weui_media_bd">
<h4 class="weui_media_title" v-text="item.name">双色球彩票一注</h4>
<p class="weui_media_desc"><span class="icon icon-2"></span><span v-text="item.price"></span>钡</p>
</div>
</a>
</div>

三、js代码

var secretRecipe = new Vue({
el: "#secret-recipe",
data: {
pointsNum: [],
mediaBox:[]
},
methods:{
upHref:function(e){
hrefSrc(e.currentTarget);
}
}
});
var prize=[
{mediaBoxImg:"../b2b-reception/images/secret/icon_01.png",name:"双色球彩票一注",price:'250',num:"1"},
{mediaBoxImg:"../b2b-reception/images/secret/icon_02.png",name:"50M流量",price:'230',num:"2"},
{mediaBoxImg:"../b2b-reception/images/secret/icon_03.png",name:"景点抽抽乐",price:"300",num:"3"}
];
$(function(){ secretRecipe.mediaBox = prize; }) function hrefSrc(v){
console.log($(v).attr("date-id"));
$.modal({
title: "支付方式",
text: "选择你的支付方式",
buttons: [
{ text: "转化积分", onClick: function(){ $.alert("你选择了转化积分"); } },
{ text: "立即购买", onClick: function(){ $.alert("你选择了立即购买"); } },
{ text: "取消", className: "default"},
]
});
}

重点说明:$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. python爬虫基础13-selenium大全7/8-异常

    Selenium笔记(7)异常 本文集链接:https://www.jianshu.com/nb/25338984 完整文档 Exceptions that may happen in all the ...

  2. 面试之mybatis和hibernate的区别

    mybatis是支持普通SQL查询.存储过程和高级映射的优秀持久层框架.封装了 几乎所有的JDBC代码和参数的手工设置 ,以及结果集的检索: 封装了:1,获取连接,执行sql,释放连接. 2,sql的 ...

  3. static关键字所导致的内存泄漏问题

    大家都知道内存泄漏和内存溢出是不一样的,内存泄漏所导致的越来越多的内存得不到回收的失手,最终就有可能导致内存溢出,下面说一下使用staitc属性所导致的内存泄漏的问题. 在dalvik虚拟机中,sta ...

  4. LeetCode(220) Contains Duplicate III

    题目 Given an array of integers, find out whether there are two distinct indices i and j in the array ...

  5. CodeForces - 948C Producing Snow(优先队列)

    题意: n天. 每天你会堆一堆雪,体积为 v[i].每天都有一个温度 t[i] 所有之前堆过的雪在第 i 天体积都会减少 t[i] . 输出每天融化了的雪的体积. 这个题的正解我怎么想都很难理解,但是 ...

  6. python基础学习笔记——列表及元组

    列表 列表的介绍  列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型. 列表的索引和切片 列表和字符串一样也拥有索引: lst = ['刘德华','周润发','周杰伦','向华强 ...

  7. 《Scrum实战》第0次课【如何学习敏捷】全团课后任务汇总

    <Scrum实战>第0次课作业 完成情况: 课程名称:如何学习敏捷 1组 孟帅 孟帅: http://www.cnblogs.com/mengshuai1982/p/7096338.htm ...

  8. 中国首届CSS开发者大会讲师照片

    中国首届CSS开发者大会讲师照片 Bert Bos Winter 点头猪 灭灭 jaychsu Hax 尤雨溪 一丝 勾三股四 小倩 **

  9. 创建sql作业(JOB)

    在SQL Server日常需求处理中,会遇到定时执行或统计数据的需求,这时我们可以通过作业(JOB)来处理,从而通过代理的方式来实现数据的自动处理.一下为SQL Server中创建作业的脚本,供大家参 ...

  10. 对于运用git将本地文件上传到coding总结

    首先需要在你的本地磁盘下建立一个目录,并且进入该目录. 前几次课程上有讲到&的用法,&&表示并且. 命令 ”makir 文件名 && cd 文件名”,cd指进入 ...